Свойство animation-direction

@keyframes anim1 {
from {width:100px;}
to {width:500px;}
}

div {
animation-name:anim1;
animation-duration:4s;
animation-iteration-count:infinite;
}

Описание

Обратите внимание: данное свойство поддерживается в браузерах IE10+, Firefox и Opera. Для браузеров Chrome и Safari требуется префикс -webkit.

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

С помощью значения alternate Вы можете указать, что анимация должна выполняться в обратном порядке в четные разы и в нормальном в нечетные.

Обратите внимание: по умолчанию данное свойство имеет значение normal обозначающее, что анимация должна всегда выполняться в нормальном порядке.