Свойство animationDirection
Пример style.animationDirection
Изменение свойства animationDirection элемента <div>:
document.getElementById("myDIV").style.animationDirection = "reverse";
Попробуйте сами »
Описание animationDirection
Свойство animationDirection устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке в альтернативных циклах.
Примечание: Если анимация настроена на однократное воспроизведение, это свойство не будет иметь никакого эффекта.
Синтаксис animationDirection
Верните свойство animationDirection:
object.style.animationDirection
Задайте свойство animationDirection:
object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
Значение свойства animationDirection
| Значение | Описание |
|---|---|
| normal | Значение по умолчанию. Анимация должна воспроизводиться как обычно. |
| reverse | Анимация должна воспроизводиться в обратном направлении. |
| alternate | Анимация будет воспроизводиться в обычном режиме каждый нечетный раз (1,3,5 и т.д.) и в обратном направлении каждый четный раз (2,4,6 и т.д.) |
| alternate-reverse | Анимация будет воспроизводиться в обратном направлении каждый нечетный раз (1,3,5 и т.д.) и в нормальном направлении каждый четный раз (2,4,6 и т.д.) |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали animationDirection
| Значение по умолчанию: | normal |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство направления анимации элемента. |
| CSS Версия | CSS3 |
Поддержка animationDirection
style.animationDirection функция CSS3 (1999).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |
Связанные страницы animationDirection
CSS Справочник: animation-direction property