Обратите внимание, что Safari и Chrome поддерживают альтернативное свойство: "-webkit-animation-direction".

Примечание: не поддерживается в IE9 и более ранних версиях.

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

Когда значение свойства animation-direction установлено как "alternate", анимация работает как "normal" на каждом нечетном проигрывании (1, 3, 5 и тд), а затем переключается на реверс на каждом четвом (2, 4, 6 и тд). Такой эффект создает ощущение плавного «дыхания» интерфейса.

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