از پراپرتی transition برای تاخیر در تغییر وضعیت یک المانی استفاده میشه، فرض کنیم یک دکمه داریم که رنگش سبزه، و در حالت hover آن گفتیم وقتی ماوس میره روش رنگش سبز کم رنگ بشه، وقتی ماوس روش میره این تغییر رنگ با سرعت زیاد انجام میشه و یه حالت بدی رو ایجاد میکنه، ما می تونیم توسط transition یک آهستگی به این تغییر رنگ بدیم تا آرام آرام در طی مثلا 1 ثانیه این اتفاق بیفته. مثال زیر رو ببینید:
یک پراپرتی transform-origin هم داریم که در واقع پوزیشن المان را تغییر میده، زیاد در وب کاربرد نداره اما برای کسب اطلاعات بیشتر می توانید به این لینک مراجعه کنید.
span.button {
background-color: Green;
/* transition: property duration timing-function delay;
-------------------------------------------------------
property ==> all width background-color border-width border-color ,...
duration ==> مدت زمان تغییر حالت
timing-function ==> حالت زمانی w3schools.com/cssref/css3_pr_transition-timing-function.php
delay ==> تاخیر در اجرا تغییر
*/
transition: all 350ms ease-in 20ms;
}
span.button:hover {
background-color: blue;
}برای کسب اطلاعات بیشتر می توانید به این لینک مراجعه کنید. همچنین می توانید برای مشاهده حالت های زمانی مختلف (transition-timing-function) به این لینک مراجعه کنید.
نکته: حتما سعی کنید برای این پراپرتی مقدار delay یا تاخیر رو تنظیم کنید، چرا؟ گاها پیش میاد ماوس کاربر شانسی از روی یک المانی رد میشه، اگه یه دیلی 20 میلی ثانیه ای تنظیم کنیم، در این صورت تغییر اتفاق نمی افته و تنها در صورت اطمینان از اینکه کاربر روی المان مورد نظر استوپ کرد، اون موقع تغییرات به آهستگی اعمال میشه.