CSS-свойство animation-direction

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

Значение по умолчанию:	`normal`
Применяется к:	Все элементы, `::before` и `::after` псевдо-элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Примеры написания кода свойства animation-direction:

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: alternate;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Свойство animation-direction не действует, если анимация настроена на воспроизведение только один раз, см. свойство animation-iteration-count.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`normal`	По умолчанию анимация воспроизводится в каждом цикле.
`reverse`	Анимация должна воспроизводиться в обратном направлении в каждом цикле.
`alternate`	Анимация воспроизводится вперед в первом цикле, затем воспроизводится назад и продолжает чередоваться.
`alternate-reverse`	Анимация воспроизводится назад в первом цикле, затем воспроизводится вперед и продолжает чередоваться.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `animation-direction`.