transition

transition یک ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های زیر را به صورت یکجا و مختصر در CSS تعریف کرد:

transition-property
transition-duration
transition-timing-function
transition-delay

ترتیب نوشتن این ویژگی ها با استفاده از ویژگی transition مهم است و باید به ترتیب اشاره شده در بالا نوشته شوند. اولین عددی که نشان دهنده زمان باشد به عنوان مقدار ویژگی transition-duration و دومین زمان به عنوان مقدار ویژگی transition-delay ثبت می شوند.

به عنوان مثال داریم:


div {
  transition: background-color .3s linear 1s;
}

و این ویژگی اجازه تعریف چند transition را هم می دهد به شرط اینکه آن ها را با استفاده از ویرگول از هم جدا کنیم:


div {
  transition: background-color 1s linear,
              left .6s ease-out 1s,
              transform 1s steps(3, start);
}

ویژگی transition را برای یک عنصر تعریف می کنیم تا کاربر بتواند تغییر ویژگی های خاصی از آن عنصر را به صورت متحرک در طول زمان مشاهده کند. این امر به کاربر کمک می کند تا متوجه انجام تغییرات شود و تجربه کاربری بهتری داشته باشد.

تمام ویژگی های یک عنصر را نمی توان با استفاده از transition متحرک سازی کرد. در این مطلب لیستی از ویژگی هایی که transition بر روی آنها اعمال می شود آمده است.

در مثال زیر در زمان hover:, تغییر رنگ پس زمینه شکل و همینطور تغییر مکان آن یک بار با transition و یک بار بدون آن به نمایش گذاشته شده است:

 

See the Pen transition by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

پشتیبانی مرورگرها