transition-timing-function

از ویژگی transition-timing-function برای تعیین سرعت تغییر ویژگی یک عنصر دارای transition در گذر زمان, استفاده می شود.

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

transition-timing-function: linear;

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

transition-property
transition-duration
transition-delay

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

.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-delay: 3s, 1.5s, 700ms, 2s;
}

معمولا تعیین transition-timing-function از طریق مختصر نویسی ویژگی transition کار راحتتری می باشد.

در مثال زیر در حالت hover: رنگ پس زمینه عنصر بوسیله ترنزیشنی با timing-function خاص تغییر می کند:

.element {
    background-color: blue;
    position: relative;
    left: 0;
    transition-property: background-color;
    transition-duration: .4s;
    transition-timing-function: ease-out;
}

.element:hover {
    background-color: #009966;
}

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

transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
transition-timing-function: steps(4, start);
transition-timing-function: ease-in-out;

برای آشنایی با دیگر مقادیر مجاز به پست timing-function مراجعه کنید.

دموی زیر و افکت زیبایی که دارد به اهمیت این ویژگی تاکید می کند:

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

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