animation-timing-function

Автор: Алексей Елизаров.

CSS свойство animation-timing-function

Поддержка браузеров

Описание

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

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

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

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

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

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

div#myDIV
{
animation-timing-function:linear;
}