Свойства CSS

Меню

animation-timing-function

Поддержка браузерами

12.0+ 10.0+ 16.0+ 43.0+ 30.0+ 9.0+

Описание

CSS свойство animation-timing-function определяет кривую скорости для анимации.

Кривая скорости определяет время анимации использующееся для перехода от одного набора стилей к другому. Данное свойство используется, чтобы сделать изменения плавными.

В этом свойстве используется математическая функция, называемая кубической кривой Безье, чтобы сделать кривую скорости. Вы можете использовать ваши собственные значения в этой функции, или использовать одно из предопределенных значений.

Значение по умолчанию: ease
Применяется: ко всем элементам и псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.animationTimingFunction="linear"

Синтаксис

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);

Значения свойства

Значение Описание
linear Анимация проигрывается с одинаковой скоростью от начала до конца.
ease Анимация ускоряется к середине и замедляется к концу проигрывания.
ease-in Замедленная анимация на старте.
ease-out Анимация замедляется к концу.
ease-in-out Анимация замедленна вначале и в конце.
cubic-bezier(n,n,n,n) Определение ваших собственных значений в кубической функции Безье. Возможные числовые значение 0 и 1.

Пример

CSS Свойство:
animation-timing-function:
Результат:
CSS Код:
div#myDIV {
animation-timing-function:linear;
}
Кликните на любое значение свойства, чтобы увидеть результат