transition-timing-function

Оновлено: 09.01.2023

transition-timing-function

Встановлює, наскільки швидко має змінюватися значення стильової властивості, для якої застосовується ефект переходу.

transition-timing-function являє собою математичну функцію, що показує, як швидко в часі змінюється вказане через transition-property значення властивості. Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, водночас функція за віссю ординат може перевищувати ці значення в більший або менший бік (рис. 1)

Рис. 1. Вид функції

Коротка інформація

Значення за замовчуванням	ease
Успадковується	Ні
Застосовується	До всіх елементів, до псевдоелементів ::before і ::after
Анімується	Ні

Синтаксис

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | 
 step-start | step-end | steps | cubic-bezier

Значення

ease	Анімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно cubic-bezier(0.25,0.1,0.25,1).
ease-in	Анімація повільно починається, до кінця прискорюється. Аналогічно cubic-bezier(0.42,0,1,1).
ease-out	Анімація починається швидко, до кінця сповільнюється. Аналогічно cubic-bezier(0,0,0.58,1).
ease-in-out	Анімація починається і закінчується повільно. Аналогічно cubic-bezier(0.42,0,0.58,1).
linear	Однакова швидкість від початку і до кінця.
step-start	Як такої анімації немає. Стильові властивості відразу ж приймають кінцеве значення.
step-end	Як такої анімації немає. Стильові властивості перебувають у початковому значенні заданий час, потім відразу ж приймають кінцеве значення.
steps	Ступінчаста функція, що має задану кількість кроків. transition-timing-function: steps(<число>, start \| end) Тут: <число> - ціле число, що більше за нуль; start - задає напівбезперервну знизу функцію; end - задає напівбезперервну зверху функцію.
cubic-bezier	Задає функцію руху у вигляді кривої Безьє.

ease

ease-in

ease-out

ease-in-out

linear

step-start

step-end

steps(2, start)

Щоб переглянути результат дії різних значень, наведіть курсор на поле нижче. Час ефекту переходу встановлено як 3s.

ease
ease-in
ease-out
ease-in-out
linear
step-start
step-end
steps(5, end)
cubic-bezier(0.1, -0.6, 0.2, 0)

Приклад

Об'єктна модель

Об'єкт.style.transitionTimingFunction

Примітка

Chrome до версії 26, Safari до версії 6.1 і Android до версії 4.4 підтримують властивість -webkit-transition-timing-function.

Opera до версії 12.10 підтримує властивість -o-transition-timing-function.

Firefox до версії 16 підтримує властивість -moz-transition-timing-function.

Safari підтримує значення steps тільки з версії 5.1.

Браузери

transition-timing-function

Переглянути сумісність з Can I use?

transition-timing-function