transition در لغت به معنی «تحول» یا «گذر کردن» از یک مرحله به مرحله ی دیگر است اما در زبان CSS زمانی که از transition ها استفاده میکنیم به عنصر اجازه می دهیم که بین دو حالت به صورت نرم و زیبا تغییر کند.
وضعیت پشتیبانی از این خصوصیت در مرورگرهای مختلف به شرح زیر است:
خصوصیت | کروم | edge | فایرفاکس | سافاری | اپرا |
transition |
26.0 |
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 به دو چیز نیاز داریم:
نکته: از آنجا که مقدار پیش فرض برای مدت زمان اجرای افکت 0 است، بنابراین اگر به آن مقدار دیگری ندهید شاهد هیچ تغییری نخواهید بود.
مثال زیر یک عنصر <div> قرمز رنگ با سایز 100px در 100px را نشان می دهد. ما برای این عنصر، یک transition از نظر خصوصیت width و به مدت 2 ثانیه تعیین کرده ایم. به کدها توجه کنید:
div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s; }
این transition زمانی اجرا شده و قابل نمایش خواهد بود که خصوصیت width در CSS تغییر کند. با استفاده از کد زیر تعیین کرده ایم که اگر کاربر با موس خود روی عنصر رفت چه اتفاقی انجام پذیرد:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p> </body> </html>
توجه داشته باشید زمانی که کاربر موس خود را از روی عنصر برمیدارد، عنصر به حالت طبیعی خود بازمی گردد.
باید بدانید که ما محدود به یک نوع خاص از تغییر نیستیم بلکه می توانیم در یک قسمت از کد چندین افکت مختلف را تعیین کنیم. به طور مثال در کد زیر تغییرات را برای width و height انجام داده ایم، به طوری که این تغییرات برای width مساوی با 2 ثانیه و برای height مساوی با 4 ثانیه باشد:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 4s; } div:hover { width: 300px; height: 300px; } </style> </head> <body> <h1>The transition Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p> </body> </html>
می توانید سرعت تغییرات افکت های مختلف را به صورت مرحله ای تعیین کنید! در حالت عادی می گفتیم مثلا 2 ثانیه یا 4 ثانیه و در طول این 2 یا 4 ثانیه سرعت انجام تغییرات در حالت خاصی بود (ابتدا آهسته بود، سپس تند می شد و در آخر دوباره آهسته می شد)، اما با سرعت های مرحله ای، این سرعت در طول 2 یا 4 ثانیه ی ما متغیر خواهد بود و خودمان نحوه ی این تغییر را تعیین می کنیم! برای تعیین سرعت های مرحله ای از خاصیت transition-timing-function
استفاده می کنیم که می تواند خاصیت های زیر را داشته باشد:
ease
- در این حالت شروع افکت آهسته بوده، سپس تند می شود و در آخر دوباره آهسته خواهد شد (حالت پیش فرض).linear
- در این حالت افکت مورد نظر در سر تا سر مدت اجرا سرعت ثابتی خواهد داشت.ease-in
- در این حالت شروع افکت آهسته خواهد بود.ease-out
- در این حالت پایان افکت آهسته خواهد بود.ease-in-out
- در این حالت شروع و پایان افکت آهسته خواهند بود.(cubic-bezier(n,n,n,n
- به شما اجازه می دهد که تغییرات سرعت را خودتان و به صورت دستی تعیین کنید.در مثال زیر برخی از این حالت ها را آورده ایم:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s; } /* 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-function Property</h1> <p>Hover over the div elements below, to see 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> <p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p> </body> </html>
خصوصیت transition-delay
اجرای افکت یا انیمیشن را تا مدت مشخصی به تعویق می اندازد. به طور مثال در کد زیر برای transition-delay
مقدار 1 ثانیه را قرار داده ایم. بنابراین شاهد 1 ثانیه وقفه در اجرای افکت خواهیم بود:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 3s; /* Safari */ -webkit-transition-delay: 1s; /* Safari */ transition: width 3s; transition-delay: 1s; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition-delay Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p dir='rtl'><b>هشدار:</b> افکت ما دارای 1 ثانیه تاخیر عمدی است و کد هایمان اشکالی ندارند.</p> <p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p> </body> </html>
در جلسات قبل در رابطه با transformation صحبت کردیم. در این مثال می خواهیم transformation ها را به همراه transition بیاوریم و نتیجه ی ترکیب آن ها را در کدهایمان ببینیم:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */ transition: width 2s, height 2s, transform 2s; } 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> <p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p> </body> </html>
همانطور که می بینید این بار به جای آنکه تغییرات ما از ابتدا روی عنصر اعمال شوند، با یک انیمیشن خاص اجرا شده و کار را بسیار زیباتر کرده اند.
خصوصیت مربوط به transition می توانند از هم جدا شده و به صورت زیر جدا جدا ذکر شوند:
<!DOCTYPE html> <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, to see the transition effect:</p> <div></div> <p dir='rtl'><b>هشدار:</b> افکت ما دارای 1 ثانیه تاخیر عمدی است و کد هایمان اشکالی ندارند.</p> <p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p> </body> </html>
و یا اینکه همگی در دستور transition خلاصه شوند:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */ transition: width 2s linear 1s; } div:hover { width: 300px; } </style> </head> <body> <h1>Using The transition Shorthand Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p dir='rtl'><b>هشدار:</b> افکت ما دارای 1 ثانیه تاخیر عمدی است و کد هایمان اشکالی ندارند.</p> <p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p> </body> </html>
در این قسمت، به پرسشهای تخصصی شما دربارهی محتوای مقاله پاسخ داده نمیشود. سوالات خود را اینجا بپرسید.