Свойства CSS

Меню

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;
}
Кликните на любое значение свойства, чтобы увидеть результат