Свойство animation-timing-function задаёт кривую скорости анимации. Эта кривая определяет, как анимация распределяет время при переходе от одного набора CSS-стилей к другому. Использование кривой скорости позволяет добиться плавных переходов и естественных изменений в движении анимации.

Значение по умолчанию:	animation-timing-function
Inherited:	no
Animatable:	no.
Version:	CSS3
Синтаксис JavaScript:	object.style.animationTimingFunction="linear"

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

Свойство:	animation-play-state
Chrome	43.0/4.0 -webkit-
Explorer/Edge	10.0
Firefox	16.0/5.0 -moz-
Safari	9.0 / 4.0 -webkit-
Opera	30.0/15.0 -webkit-/ 12.0 -o-

Синтаксис CSS

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

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

""

Значение	Описание
linear	Анимация имеет одинаковую скорость от начала до конца
ease	Значение по умолчанию. Анимация имеет медленный запуск, а затем быстро, прежде чем она заканчивается медленно
ease-in	Анимация имеет медленный запуск
ease-out	Анимация имеет медленный конец
ease-in-out	Анимация имеет медленный запуск и медленный конец
step-start	Эквивалентно шагам (1, запуск)
step-end	Эквивалентно шагам (1, конец)
steps(int,start|end)	Задает функцию степпинга с двумя параметрами. Первый параметр указывает количество интервалов в функции. Оно должно быть положительным целым числом (больше 0). Второй параметр, который является необязательным, является либо значением "Start", либо "End", и указывает точку, в которой изменение значений происходит в интервале. Если второй параметр опущен, ему дается значение "End"
cubic-bezier(n,n,n,n)	Определите собственные значения в функции кубической Безье Возможные значения — это числовые значения от 0 до 1
initial	Присваивает этому свойству значение по умолчанию.
inherit	Наследует это свойство из родительского элемента.