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.

 

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

<single-animation-direction>#
где 
<single-animation-direction> = normal | reverse | alternate | alternate-reverse

Примеры

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

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

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

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

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