Свойства - Animation-iteration-count, animation-direction

Animation-iteration-count

Animation-iteration-count: устанавливает количество раз, которое будет проигрываться анимация. 

Возможные значения:

• # - определенное количество итераций (по умолчанию - 1);
• infinite - анимация повторяется навсегда;
• initial - устанавливает счетчик итераций по умолчанию;
• inherit - наследует значение от родительского

Например, 

Синтаксис CSS:

animation-iteration-count: 2

Синтаксис сокращения анимации (рекомендуется):

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count];
animation:  bounceIn 2s ease-in-out 3s 2; 

Animation-direction

Animation-direction: свойство определяет направление движения анимации (вперед, назад или в альтернативных циклах).

Возможные значения:

• normal (по умолчанию) - анимация воспроизводится вперед. На каждом цикле анимация сбрасывается до начального состояния (0%) и снова воспроизводится (до 100%).
• reverse - анимация воспроизводится в обратном направлении. На каждом цикле анимация сбрасывается до конечного состояния (100%) и воспроизводится в обратном направлении (до 0%).
• alternate - анимация меняет направление на каждый цикл. В каждом нечетном цикле анимация воспроизводится вперед (от 0% до 100%). На каждом четном цикле анимация воспроизводится в обратном направлении (от 100% до 0%).
• alternate-reverse - анимация меняет направление на каждый цикл. В каждом нечетном цикле анимация воспроизводится в обратном порядке (от 100% до 0%). На каждом четном цикле анимация воспроизводится вперед (0% или 100%).

Синтаксис CSS:

animation-direction: alternate;

Синтаксис сокращения анимации (рекомендуется):

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction];
animation:  bounceIn 2s ease-in-out 3s 3 alternate;

Например,