Устанавливает направление движения анимации.
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;
}