animation-iteration-count

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство animation-iteration-count CSS задаёт количество раз, которое последовательность анимации должна воспроизводиться перед остановкой.

Попробуйте

Часто удобно использовать сокращённое свойство animation, чтобы установить все свойства анимации сразу.

Синтаксис

/* Keyword value */
animation-iteration-count: infinite;

/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* Multiple values */
animation-iteration-count: 2, 0, infinite;

/* Global values */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;

Свойство animation-iteration-count задаётся как одно или несколько значений, разделённых запятыми.

Значения

infinite: Анимация будет повторяться бесконечно.
<number>: Количество раз, которое анимация будет повторяться; по умолчанию это 1. Вы можете указать значения, не являющиеся целыми числами, чтобы воспроизвести часть цикла анимации: например, 0.5 воспроизведёт половину цикла анимации. Отрицательные значения недопустимы.

Примечание: Когда вы указываете несколько значений, разделённых запятыми, для свойства animation-* , они применяются к анимациям в том порядке, в котором появляются значения animation-name. Для ситуаций, когда количество анимаций и значений свойства animation-* не совпадают, см. Установка нескольких значений свойства анимации.

Примечание: При создании CSS-анимаций, управляемых прокруткой, указание значения animation-iteration-count заставляет анимацию повторяться указанное количество раз в течение хода временной шкалы. Если значение animation-iteration-count не указано, анимация произойдёт только один раз. infinite — допустимое значение для анимаций, управляемых прокруткой, но оно приводит к неработающей анимации.

Формальное определение

Начальное значение	`1`
Применяется к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

Формальный синтаксис

animation-iteration-count = 
  <single-animation-iteration-count>#  

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>

Примеры

Установка количества повторений

Эта анимация выполнится 10 раз.

HTML

<div class="box"></div>

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Результат

Наведите указатель мыши на прямоугольник, чтобы запустить анимацию.

См. CSS-анимации для примеров.

Спецификации

Спецификация
CSS Animations Level 1 # animation-iteration-count

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`animation-iteration-count`	433	1212	16495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	93.2	4.01.0	434.4
`infinite`	3	12	5	15	4	18	5	14	3.2	1.0	4.4

См. также

Использование CSS-анимаций
JavaScript AnimationEvent API
Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-name, animation-play-state, animation-timeline, animation-timing-function

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count