animation-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

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

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

Начальное значениеnormal
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Обработка значениякак указано
Animation typeNot animatable

Синтаксис

css
/* Одиночная анимация */
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 анимаций.

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

Specification
CSS Animations Level 1
# animation-direction

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

BCD tables only load in the browser

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