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

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

См. также transition-duration, transition-property, transition-delay.

См. также CSS3 анимацию animation.

Синтаксис

селектор {
	transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps | cubic-bezier(параметры);
}
селектор {
	transition-timing-function: steps(число скачков, start | end);
}

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

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

Значения

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

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

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

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

Примеры

Пример

Наведите мышкой на блок - он плавно изменит свою ширину за 2 секунды. Так как установлено значение ease-in, то анимация начнется медленно и будет постепенно ускорятся:

#elem {
	border: 1px solid black;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 2s;
	-webkit-transition-property: width;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 2s;
	-moz-transition-property: width;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Результат выполнения кода: