animation-direction - Направление анимации

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

Синтаксис написания:

/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

нормальный (normal)
Анимация воспроизводит каждый цикл вперед. Другими словами, при каждом цикле анимации анимация сбрасывается в начальное состояние и начинается заново. Это значение по умолчанию.

задний ход (reverse)
Анимация воспроизводится в обратном направлении каждого цикла. Другими словами, каждый раз, когда анимация циклически повторяется, анимация сбрасывается в конечное состояние и начинается заново. Этапы анимации выполняются в обратном направлении, а функции синхронизации также меняются местами. Например, функция синхронизации замедления становится замедлением.

чередовать (alternate)
Анимация меняет направление в каждом цикле, при этом первая итерация воспроизводится вперед. Счетчик, чтобы определить, является ли цикл четным или нечетным, начинается с одного.

Альтернативный-обратный (alternate-reverse)
Анимация меняет направление в каждом цикле, а первая итерация воспроизводится задом наперед. Счетчик, чтобы определить, является ли цикл четным или нечетным, начинается с одного.

Примечание.

Когда вы указываете несколько значений, разделенных запятыми, в свойстве animation- *, они будут назначаться анимациям, указанным в свойстве animation-name, по-разному, в зависимости от их количества. Для получения дополнительной информации см. Установка нескольких значений свойств анимации.