transition در لغت به معنی «تحول» یا «گذر کردن» از یک مرحله به مرحله ی دیگر است اما در زبان CSS زمانی که از transition ها استفاده میکنیم به عنصر اجازه می دهیم که بین دو حالت به صورت نرم و زیبا تغییر کند.
وضعیت پشتیبانی از این خصوصیت در مرورگرهای مختلف به شرح زیر است:
| خصوصیت |
کروم |
edge |
فایرفاکس |
سافاری |
اپرا |
| transition |
26.0
4.0 -webkit-
|
10.0 |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
| transition-delay |
26.0
4.0 -webkit- |
10.0 |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
| transition-duration |
26.0
4.0 -webkit- |
10.0 |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
| transition-property |
26.0
4.0 -webkit- |
10.0 |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
| transition-timing-function |
26.0
4.0 -webkit- |
10.0 |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
ساخت transition در css
برای ساخت transition در css به دو چیز نیاز داریم:
- خصوصیت CSS ای که قرار است افکت ما را بگیرد
- مدت زمان اجرای افکت
نکته: از آنجا که مقدار پیش فرض برای مدت زمان اجرای افکت 0 است، بنابراین اگر به آن مقدار دیگری ندهید شاهد هیچ تغییری نخواهید بود.
مثال زیر یک عنصر <div> قرمز رنگ با سایز 100px در 100px را نشان می دهد. ما برای این عنصر، یک transition از نظر خصوصیت width و به مدت 2 ثانیه تعیین کرده ایم. به کدها توجه کنید:
|
|
div{
width:100px;
height:100px;
background:red;
-webkit-transition:width2s;/* Safari */
transition:width2s;
}
|
این transition زمانی اجرا شده و قابل نمایش خواهد بود که خصوصیت width در CSS تغییر کند. با استفاده از کد زیر تعیین کرده ایم که اگر کاربر با موس خود روی عنصر رفت چه اتفاقی انجام پذیرد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
-webkit-transition:width2s;/* For Safari 3.1 to 6.0 */
transition:width2s;
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below,tosee the transition effect:</p>
<div></div>
<pdir='rtl'><b>هشدار:</b>اینمثالدرInternet Explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
توجه داشته باشید زمانی که کاربر موس خود را از روی عنصر برمیدارد، عنصر به حالت طبیعی خود بازمی گردد.
باید بدانید که ما محدود به یک نوع خاص از تغییر نیستیم بلکه می توانیم در یک قسمت از کد چندین افکت مختلف را تعیین کنیم. به طور مثال در کد زیر تغییرات را برای width و height انجام داده ایم، به طوری که این تغییرات برای width مساوی با 2 ثانیه و برای height مساوی با 4 ثانیه باشد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
-webkit-transition:width2s,height4s;/* For Safari 3.1 to 6.0 */
transition:width2s,height4s;
}
div:hover {
width:300px;
height:300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below,tosee the transition effect:</p>
<div></div>
<pdir='rtl'><b>هشدار:</b>اینمثالدرInternet Explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تعیین سرعت مرحله ای
می توانید سرعت تغییرات افکت های مختلف را به صورت مرحله ای تعیین کنید! در حالت عادی می گفتیم مثلا 2 ثانیه یا 4 ثانیه و در طول این 2 یا 4 ثانیه سرعت انجام تغییرات در حالت خاصی بود (ابتدا آهسته بود، سپس تند می شد و در آخر دوباره آهسته می شد)، اما با سرعت های مرحله ای، این سرعت در طول 2 یا 4 ثانیه ی ما متغیر خواهد بود و خودمان نحوه ی این تغییر را تعیین می کنیم! برای تعیین سرعت های مرحله ای از خاصیت transition-timing-function استفاده می کنیم که می تواند خاصیت های زیر را داشته باشد:
ease – در این حالت شروع افکت آهسته بوده، سپس تند می شود و در آخر دوباره آهسته خواهد شد (حالت پیش فرض).linear – در این حالت افکت مورد نظر در سر تا سر مدت اجرا سرعت ثابتی خواهد داشت.ease-in – در این حالت شروع افکت آهسته خواهد بود.ease-out – در این حالت پایان افکت آهسته خواهد بود.ease-in-out – در این حالت شروع و پایان افکت آهسته خواهند بود.(cubic-bezier(n,n,n,n – به شما اجازه می دهد که تغییرات سرعت را خودتان و به صورت دستی تعیین کنید.
در مثال زیر برخی از این حالت ها را آورده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
-webkit-transition:width2s;/* Safari */
transition:width2s;
}
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function:linear;}
#div2 {-webkit-transition-timing-function:ease;}
#div3 {-webkit-transition-timing-function:ease-in;}
#div4 {-webkit-transition-timing-function:ease-out;}
#div5 {-webkit-transition-timing-function:ease-in-out;}
/* Standard syntax */
#div1 {transition-timing-function:linear;}
#div2 {transition-timing-function:ease;}
#div3 {transition-timing-function:ease-in;}
#div4 {transition-timing-function:ease-out;}
#div5 {transition-timing-function:ease-in-out;}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>The transition-timing-functionProperty</h1>
<p>Hover over the div elements below,tosee the different speed curves:</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
<pdir='rtl'><b>هشدار:</b>اینمثالدرInternet Explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت transition-delay
خصوصیت transition-delay اجرای افکت یا انیمیشن را تا مدت مشخصی به تعویق می اندازد. به طور مثال در کد زیر برای transition-delay مقدار 1 ثانیه را قرار داده ایم. بنابراین شاهد 1 ثانیه وقفه در اجرای افکت خواهیم بود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
-webkit-transition:width3s;/* Safari */
-webkit-transition-delay:1s;/* Safari */
transition:width3s;
transition-delay:1s;
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<p>Hover over the div element below,tosee the transition effect:</p>
<div></div>
<pdir='rtl'><b>هشدار:</b>افکتمادارای1ثانیهتاخیرعمدیاستوکدهایماناشکالیندارند.</p>
<pdir='rtl'><b>هشدار:</b>اینمثالدرInternet Explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همراهی transition و transformation
در جلسات قبل در رابطه با transformation صحبت کردیم. در این مثال می خواهیم transformation ها را به همراه transition بیاوریم و نتیجه ی ترکیب آن ها را در کدهایمان ببینیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
-webkit-transition:width2s,height2s,-webkit-transform2s;/* Safari */
transition:width2s,height2s,transform2s;
}
div:hover {
width:300px;
height:300px;
-webkit-transform:rotate(180deg);/* Safari */
transform:rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition+Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
<pdir='rtl'><b>هشدار:</b>اینمثالدرInternet Explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید این بار به جای آنکه تغییرات ما از ابتدا روی عنصر اعمال شوند، با یک انیمیشن خاص اجرا شده و کار را بسیار زیباتر کرده اند.
جدا کردن خصوصیات
خصوصیت مربوط به transition می توانند از هم جدا شده و به صورت زیر جدا جدا ذکر شوند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
/* For Safari 3.1 to 6.0 */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;
/* Standard syntax */
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:1s;
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>The transition Properties Specified One by One</h1>
<p>Hover over the div element below,tosee the transition effect:</p>
<div></div>
<pdir='rtl'><b>هشدار:</b>افکتمادارای1ثانیهتاخیرعمدیاستوکدهایماناشکالیندارند.</p>
<pdir='rtl'><b>هشدار:</b>اینمثالدرInternet Explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
و یا اینکه همگی در دستور transition خلاصه شوند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
-webkit-transition:width2slinear1s;/* For Safari 3.1 to 6.0 */
transition:width2slinear1s;
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>Using The transition Shorthand Property</h1>
<p>Hover over the div element below,tosee the transition effect:</p>
<div></div>
<pdir='rtl'><b>هشدار:</b>افکتمادارای1ثانیهتاخیرعمدیاستوکدهایماناشکالیندارند.</p>
<pdir='rtl'><b>هشدار:</b>اینمثالدرInternet Explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟