animation-direction
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 43.0+ | 30.0+ | 9.0+ |
Описание
CSS свойство animation-direction указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.
Если значение свойства animation-direction установлено как "alternate", анимация будет проигрываться как "normal" каждый нечетный раз (1,3,5 и тд) и как реверс каждый четный раз (2,4,6 и тд).
Если в настройках анимации установлено проигрывание только однажды, это свойство не будет иметь эффекта.
| Значение по умолчанию: | normal |
|---|---|
| Применяется: | ко всем элементам и псевдо-элементам ::before и ::after |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.animationDirection="alternate" |
Синтаксис
animation-direction: normal|reverse|alternate|alternate-reverse;
Значения свойства
| Значение | Описание |
|---|---|
| normal | После прохождения полного цикла анимация сбрасывается в начальное состояние и начинается заново. |
| reverse | Анимация воспроизводится в обратном направлении, то есть каждый раз анимация начинает свое воспроизведения со своей конечной точки, проходит весь цикл и начинается заново. |
| alternate | После прохождения полного цикла анимация изменяет свое направление на противоположное. При воспроизведении в обратном направлении все шаги анимации выполняются наоборот. |
| alternate-reverse | Анимация начинает воспроизводится в обратном направлении, потом меняя свое направление на противоположное. |
Пример
CSS Свойство:
animation-direction:
Результат:
CSS Код:
div#myDIV {
animation-direction:normal;
}
animation-direction:normal;
}