animation-timing-function
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 43.0+ | 30.0+ | 9.0+ |
Описание
CSS свойство animation-timing-function определяет кривую скорости для анимации.
Кривая скорости определяет время анимации использующееся для перехода от одного набора стилей к другому. Данное свойство используется, чтобы сделать изменения плавными.
В этом свойстве используется математическая функция, называемая кубической кривой Безье, чтобы сделать кривую скорости. Вы можете использовать ваши собственные значения в этой функции, или использовать одно из предопределенных значений.
| Значение по умолчанию: | ease |
|---|---|
| Применяется: | ко всем элементам и псевдо-элементам ::before и ::after |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.animationTimingFunction="linear" |
Синтаксис
animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);
Значения свойства
| Значение | Описание |
|---|---|
| linear | Анимация проигрывается с одинаковой скоростью от начала до конца. |
| ease | Анимация ускоряется к середине и замедляется к концу проигрывания. |
| ease-in | Замедленная анимация на старте. |
| ease-out | Анимация замедляется к концу. |
| ease-in-out | Анимация замедленна вначале и в конце. |
| cubic-bezier(n,n,n,n) | Определение ваших собственных значений в кубической функции Безье. Возможные числовые значение 0 и 1. |
Пример
CSS Свойство:
animation-timing-function:
Результат:
CSS Код:
div#myDIV {
animation-timing-function:linear;
}
animation-timing-function:linear;
}