دستورالعمل مرجع CSS

ویژگی-CSS

ویژگی transition یک ویژگی کوتاه است که برای تنظیم چهار ویژگی过渡 استفاده می‌شود:

توضیحات:لطفاً همیشه transition-duration اگر زمانی مشخص نشود، طول زمان به 0 خواهد بود و اثر گذار ایجاد نمی‌شود.

آموزش CSS:过渡 CSS

دستورالعمل HTML DOM:ویژگی transition

مکان‌نمای موس را روی عنصر div بگذارید، عرض آن از 100px به تدریج به 300px تبدیل می‌شود:

div {
  width: 100px;
  transition: width 2s;
}

transition: property duration timing-function delay;

مقادیر	توضیح
transition-property	تعیین نام ویژگی‌های CSS که باید به طور过渡 تغییر کنند.
transition-duration	تعیین مدت زمانی که برای تکمیل اثر گذار نیاز است.
transition-timing-function	تعیین منحنی سرعت اثر.
transition-delay	تعریف زمان شروع اثر گذار.

مقدار پیش‌فرض:	all 0 ease 0
وراثت:	no
نسخه:	CSS3
جمله‌بندی JavaScript:	object.style.transition="width 2s"

اعداد در جدول نشان‌دهنده نسخه اولیه‌ای از مرورگرها هستند که از این ویژگی به طور کامل پشتیبانی می‌کنند.

اعداد با -webkit-، -moz- یا -o- نشان‌دهنده نسخه اولیه‌ای است که از پیشوند استفاده می‌شود.

Chrome	IE / Edge	Firefox	Safari	Opera
26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-