Форум мастеров

animation-direction

Устанавливает направление движения анимации.

Песочница

@keyframes move {
  from { background: #e4efc7; transform: translateX(0); }
  to { background: #fee5db; transform: translateX(300px); }
}
div {
  animation: move 5s infinite; 
  animation-direction: normal;
}

Краткая информация

Значение по умолчаниюnormal
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after
АнимируетсяНет

Значения

normal
Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию.
alternate
Анимация идёт с начала до конца, затем плавно возвращается в исходное положение.
reverse
Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию.
alternate-reverse

Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.