5 августа буду в отъезде. отвечаю по возможности

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

Свойство 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, представляющие собой анимацию по наведению на элемент