Свойство transition-timing-function

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

Синтаксис

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

Значения

Значение	Описание
`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.

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

Наведите мышкой на представленные ниже блоки, чтобы увидеть работу всех видов временных функций:

Пример

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

<div id="elem"></div>

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

Смотрите также

свойство transition-duration,
которое задает длительность плавного перехода
свойство transition-property,
которое задает имя свойства для плавного перехода
свойство transition-delay,
которое задает задержку перед плавным переходом
свойство transition,
которое является сокращением для плавного перехода
свойство animation,
с помощью которого можно сделать анимацию