Вы здесь

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

Устанавливает направление движения анимации.

CSS синтаксис

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

Возможные значения

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

Пример

Проиграть анимацию один раз, а затем проиграть ее в обратном направлении


div {
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation-direction: alternate;
}