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;
}