Transition ها در زبان CSS

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 ثانیه تعیین کرده ایم. به کدها توجه کنید:

این transition زمانی اجرا شده و قابل نمایش خواهد بود که خصوصیت width در CSS تغییر کند. با استفاده از کد زیر تعیین کرده ایم که اگر کاربر با موس خود روی عنصر رفت چه اتفاقی انجام پذیرد: