Свойство animationTimingFunction
Пример style.animationTimingFunction
Изменение свойства animationTimingFunction элемента <div>:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Попробуйте сами »
Описание animationTimingFunction
animationTimingFunction определяет кривую скорости анимации.
Кривая скорости определяет ВРЕМЯ, которое анимация использует для перехода от одного набора стилей CSS к другому.
Кривая скорости используется для плавного перехода от одного набора стилей CSS к другому.
Синтаксис animationTimingFunction
Вернуть свойство animationTimingFunction:
object.style.animationTimingFunction
Установите свойство animationTimingFunction:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Значение свойства animationTimingFunction
| Значение | Описание |
|---|---|
| linear | Анимация имеет одинаковую скорость от начала до конца. |
| ease | Значение по умолчанию. Анимация имеет медленное начало, затем быстрое, прежде чем она медленно заканчивается |
| ease-in | Анимация имеет медленное начало |
| ease-out | Анимация имеет медленный конец. |
| ease-in-out | Анимация имеет как медленное начало, так и медленный конец. |
| cubic-bezier(n, n, n, n) | Определите собственные значения в функции cubic-bezier Возможные значения — числовые значения от 0 до 1 |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали animationTimingFunction
| Значение по умолчанию: | ease |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство animation-timing-function элемента. |
| CSS Версия | CSS3 |
Поддержка animationTimingFunction
style.animationTimingFunction функция CSS3 (1999).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |
Связанные страницы animationTimingFunction
CSS Справочник: Свойство animation-timing-function