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

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

Синтаксис

Значения

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

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

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

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

• свойство animation,
  представляющее собой свойство-сокращение для анимаций
• команду @keyframes,
  задающую ключевые кадры анимации
• плавные переходы transition, представляющие собой анимацию по наведению на элемент