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

Сначала воспроизвести анимацию вперед, а затем назад:

div {
animation-direction: alternate;
}

Подробнее примеры ниже.

Определение и использование

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

Значение по умолчанию:	normal
Inherited:	no
Animatable:	no. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.animationDirection="reverse"

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Свойство
animation-direction	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

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

Сначала воспроизводите анимацию в обратном направлении, затем вперед:

div {
animation-direction: alternate-reverse;
}

Воспроизвести анимацию в обратном направлении:

div {
animation-direction: reverse;
}