transition-duration

ویژگی transition-duration تعیین می کند که transition چه مدت زمانی به طول می انجامد. یعنی چه مدت طول می کشد تا مقدار ویژگی که transition بر روی آن اعمال می شود از مقدار قبلی به مقدار جدید برسد.

واحد زمانی این ویژگی می تواند ثانیه و یا میلی ثانیه باشد و مقدار پیشفرض آن 0 است به این معنا که transition فورا انجام می شود و متحرک سازی وجود نخواهد داشت.

div {
  transition-duration: 0.7s;                        
}

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

div {
  transition-duration: .6s, 1.5s, 2s;
}

زمانی که شبیه به روش دوم مدت زمان را برای transition تعیین می کنید باید ترتیب آنها را در زمان تعیین دیگر ویژگی های transition در نظر داشته باشید. دیگر ویژگی های transition شامل موارد زیر هستند:
transition-property
transition-timing-function
transition-delay

در مثال زیر ویژگی color دارای دوره زمانی 2s و transition-timing-function آن برابر ease می باشد و دیگر ویژگی ها هم به ترتیب به همین صورت مقادیرشان تعیین می شود.

.element {
  transition-property: color, background-color, left, top;
  transition-duration: 2s, 1s, .3s, .2s;
  transition-timing-function: ease, steps(3, end), ease-out, ease-in;
}

مقدار دهی این ویژگی به روش های زیر مجاز است:

  transition-duration: 3s;
  transition-duration: 700ms;
  transition-duration: .6s, 250ms, 4s;

در مثال زیر مدت زمان انجام transition برای ویژگی رنگ 600 میلی ثانیه و برای رنگ پس زمینه 900 میلی ثانیه ثبت شده است یعنی زمانی که عنصر در حالت hover: قرار می گیرد 600 میلی ثانیه طول می کشد تا رنگ آن از سیاه به سفید تبدیل شود و 900 میلی ثانیه طول می کشد تا پس زمینه آن از سفید به سیاه تبدیل شود.

.element {
    color: black;
    background-color: white;
    transition-property: color, background-color;
    transition-duration: .6s, .9s;
    transition-timing-function: ease-out, ease-in-out;
}

.element:hover {
    color: white;
    background-color: black;
}

دموی زیر برای بررسی بیشتر آماده شده است, عناصر در زمان hover: با transition-duration های متفاوت تغییر رنگ و مکان دارند:

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

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