animation-direction

Описание

CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.

Также удобно использовать сокращённое свойство animation, чтобы одновременно установить все свойства анимации.

Синтаксис

/* Одиночная анимация */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Несколько анимаций */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Глобальные значения */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

Значения

normal

Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.

reverse

Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.

alternate

Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.

alternate-reverse

Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count.

Формальный синтаксис

animation-direction = 
  <single-animation-direction>#  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

Примеры

Смотрите примеры CSS анимаций.

Спецификации

Совместимость с браузерами

Смотрите также

• Использование CSS-анимации
• AnimationEvent