Как настроить количество повторений анимации в CSS?

Для настройки количества повторений анимации в CSS используется свойство animation-iteration-count. 14

Значение свойства может быть числом, указывающим точное количество повторений, или ключевым словом infinite, которое означает бесконечное повторение. 12

Синтаксис: селектор { animation-iteration-count: целое или дробное число | infinite;}. 4

Некоторые примеры использования:

• Конечное число повторений. 4 Например, анимация повторится 3 раза, а затем вернётся в исходное состояние. 4 #elem { animation-duration: 3s; animation-name: move; animation-iteration-count: 3; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px;}. 4
• Бесконечное повторение. 14 Например, элемент будет постоянно вращаться. 1 #infinite-rotation { animation-name: rotate; animation-duration: 4s; animation-iteration-count: infinite; /* Анимация повторяется бесконечно */}. 1

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