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

CSS-свойство animation-iteration-count указывает, сколько раз цикл анимации должен быть воспроизведен перед остановкой.

Значение по умолчанию:	`1`
Применяется к:	Все элементы, `::before` и `::after` псевдо-элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

animation-iteration-count: number | infinite | initial | inherit

Примеры написания кода свойства animation-iteration-count:

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
number	Определяет, сколько раз анимация должна повторяться. Значение по умолчанию равно 1. Отрицательные значения не допускаются.
`infinite`	Анимация будет повторяться вечно, то есть бесконечно много раз.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего свойства родительского элемента `animation-iteration-count`.

Вы можете указать нецелые значения, такие как 0.5, 0.75 и т. д., Чтобы воспроизвести только часть цикла анимации, например, значение 0.5 будет воспроизводить половину цикла анимации.