Свойство animation-timing-function устанавливает скорость изменения (ускорение) анимации. Например, сначала медленно, потом быстро, потом медленно и т.д.

Данное свойство входит в свойство-сокращение animation.

См. все свойства для CSS анимации animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes.

См. также transition - плавные переходы (анимация по наведению на элемент).

Синтаксис

Одно из значений: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps, cubic-bezier(параметры):

селектор {
	animation-timing-function: значение;
}

Анимация скачками:

селектор {
	animation-timing-function: steps(число скачков, start | end);
}

Для добавления нескольких анимаций следует задавать значения через запятую:

селектор {
	animation-timing-function: ease, ease-in;;
}

Значения

Значение Описание
ease Сначала медленно, потом быстро, в конце опять медленно.
ease-in Начинается медленно и постепенно ускоряется.
ease-out Начинается быстро и постепенно останавливается.
ease-in-out Сначала медленно, потом быстро, в конце опять медленно. От ease отличается скоростью.
linear Всегда одна и та же скорость.
step-start Анимации нет, свойство сразу принимает окончательное значение.
step-end Анимации нет, свойство ждет время, заданное в animation-duraton, а затем мгновенно принимает окончательное значение.
steps Значение свойства изменяется скачками. Применяется так: animation-timing-function: steps(число скачков, start или end) (см. примеры, чтобы понять разницу).
cubic-bezier Кривая Безье, которая может задавать произвольную анимацию. См. генератор кривых Безье.

Значение по умолчанию: ease.

Сравнение различных значений

ease
ease-in
ease-out
ease-in-out
linear
step-start
step-end
steps(3, end)
steps(3, start)