У свойства animation-direction есть ещё два значения. Они используются, когда количество проигрываний анимации animation-iteration-count больше одного. И оба они определяют чередующееся направление анимации.

Если задано значение alternate, то нечётные проигрывания будут выполняться в прямом направлении, а чётные — в обратном.

.element {
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

В примере анимация move выполнится два раза: в первый (нечётный) раз направление будет прямым, а во второй (чётный) — обратным.

Если задано значение alternate-reverse, то нечётные проигрывания наоборот будут выполняться в обратном направлении, а чётные — в прямом.

Рассмотрим это на наглядном примере.