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