Свойство animation-iteration-count

По умолчанию анимация на веб-странице проигрывается один раз, после чего останавливается. К счастью, в CSS имеется инструмент, с помощью которого можно управлять количеством повторений анимации. Свойство называется animation-iteration-count и принимает следующие значения:

• число — вы указываете произвольное число, которое определяет, сколько раз повторится анимация. Кроме целых чисел можно использовать и дробные, в том числе меньше единицы. К примеру, число 0.25 означает, что будет воспроизведена четверть одного цикла анимации, а число 3 — что анимация повторится три раза.
• infinite — ключевое слово, которое означает бесконечное повторение анимации.

Свойство записывается рядом с другими стилями анимируемого элемента:

.traffic-light {
    animation-name: changeBackgroundColor;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

Как и всегда, при работе со свойствами, которые относятся к анимации CSS3, обязательно использование префиксов производителей, таких как -webkit-, -o-, -moz-.

Далее в учебнике: свойство animation-direction для изменения направления анимации.