animation-timing-function

Оновлено: 20.01.2023

animation-timing-function

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

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

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

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

Синтаксис

animation-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-star Як такої анімації немає. Стильові властивості відразу ж приймають кінцеве значення.
step-end Як такої анімації немає. Стильові властивості перебувають у початковому значенні заданий час, потім відразу ж приймають кінцеве значення.
steps Ступінчаста функція, що має задане число кроків.animation-timing-function: steps(<число>, start | end)Тут: <число> - ціле число, що перевищує нуль; start - задає напівбезперервну знизу функцію; end - задає напівбезперервну зверху функцію.
cubic-bezier Задає функцію руху у вигляді кривої Безьє.

Приклад

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

Об'єкт.style.animationTimingFunction

Примечание

Chrome, Safari и Android підтримують властивість -webkit-animation-timing-function.

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

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

Браузери

animation-timing-function

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

animation-timing-function