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