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

Определение и применение

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

Основы и примеры — в уроке об анимациях CSS. Несколько настроек можно объединить сокращённым свойством animation.

В генераторе анимаций можно задать число повторов или включить бесконечное воспроизведение.

Попробуйте значения animation-iteration-count

Выберите число проходов. После конечного числа анимация останавливается; смена значения пересоздаёт сцену.

Значение свойстваanimation-iteration-count: 1;animation-iteration-count: 2;animation-iteration-count: infinite;

animation-iteration-count: 1

HTML и CSS примера

HTML

<div class="stage">
  <div class="demo-target">CSS</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  animation-name: travel;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: 1;
}
@keyframes travel {
  from {
    transform: translateX(-55px);
  }
  to {
    transform: translateX(55px);
  }
}
@keyframes turn {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  animation-name: travel;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: 2;
}
@keyframes travel {
  from {
    transform: translateX(-55px);
  }
  to {
    transform: translateX(55px);
  }
}
@keyframes turn {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  animation-name: travel;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
@keyframes travel {
  from {
    transform: translateX(-55px);
  }
  to {
    transform: translateX(55px);
  }
}
@keyframes turn {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

Поддержка браузерами

Спецификация: CSS animations

Поддерживается во всех основных браузерах с 2016 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.animation-iteration-count
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`animation-iteration-count`	✓43 Версия 43 выпущена в 2015 г. Версия 3 выпущена в 2009 г. — Префикс -webkit-	✓12 Версия 12 выпущена в 2015 г. Версия 12 выпущена в 2015 г. — Префикс -webkit-	✓16 Версия 16 выпущена в 2012 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- Версия 5 выпущена в 2011 г. — Префикс -moz-	✓30 Версия 30 выпущена в 2015 г. Версия 15 выпущена в 2013 г. — Префикс -webkit- Версия 12.1 выпущена в 2012 г. — Удалено в 15 Версия 12 выпущена в 2012 г. — Удалено в 15; Префикс -o-	✓9 Версия 9 выпущена в 2015 г. Версия 4 выпущена в 2009 г. — Префикс -webkit-	✓43 Версия 43 выпущена в 2015 г. Версия 18 выпущена в 2012 г. — Префикс -webkit-	✓16 Версия 16 выпущена в 2012 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- Версия 5 выпущена в 2011 г. — Префикс -moz-	✓30 Версия 30 выпущена в 2015 г. Версия 14 выпущена в 2013 г. — Префикс -webkit- Версия 12.1 выпущена в 2012 г. — Удалено в 14 Версия 12 выпущена в 2012 г. — Удалено в 14; Префикс -o-	✓9 Версия 9 выпущена в 2015 г. Версия 3.2 выпущена в 2010 г. — Префикс -webkit-	✓4.0 Версия 4.0 выпущена в 2016 г. Версия 1.0 выпущена в 2013 г. — Префикс -webkit-	✓43 Версия 43 выпущена в 2015 г. Версия 4.4 выпущена в 2013 г. — Префикс -webkit-	✓9 Версия 9 выпущена в 2015 г. Версия 3.2 выпущена в 2010 г. — Префикс -webkit-
`infinite`	✓3	✓12	✓5	✓15	✓4	✓18	✓5	✓14	✓3.2	✓1.0	✓4.4	✓3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

animation-iteration-count: [ <number [0,∞]> | infinite ]#;

/* Глобальные значения */
animation-iteration-count: initial | inherit | unset | revert | revert-layer;

Тип <number [0,∞]> — неотрицательное число без единиц измерения. Знак # означает одно или несколько значений через запятую. Знак | разделяет варианты. Квадратные скобки группируют варианты.

JavaScript синтаксис:

JavaScript

element.style.animationIterationCount = "2.5";

Начальное значение свойства

1.

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

Значения animation-iteration-count
Значение	Описание
`<number [0,∞]>`	Число циклов: `0` не проигрывает ни одного, `2.5` выполняет два полных цикла и половину следующего. Отрицательные значения недопустимы.
`1`	Один цикл. Начальное значение.
`infinite`	Повторение без конечного числа циклов.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `animation-iteration-count` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Значения через запятую соответствуют именам в animation-name по порядку. Если значений меньше, список повторяется; лишние значения не используются.

Циклы, направление и длительность

Для обычной временной анимации длительность активной части равна animation-duration, умноженной на число циклов. При alternate проход обратно считается отдельным циклом. После конечного числа повторов сохранение результата зависит от animation-fill-mode.

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

CSS Animations Level 1.

Наследуется

Нет.

Анимируемое

Нет.

Примеры, попробуйте сами

Количество повторений

Первая дорожка выполняет один цикл, вторая — два с половиной. Измените 2.5 на infinite. Чтобы запустить конечные анимации снова, выключите и включите их. Попробуйте также 0, затем верните 2.5 и добавьте animation-direction: alternate — сравните конечное положение.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.track {
    position: relative;
    height: 70px;
    margin-top: 16px;
    border: 1px dashed #607589;
    background: #edf2f5;
}
.box {
    position: absolute;
    top: 12px;
    left: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #245a85;
    color: white;
}
.run:not(:checked) ~ .track .box {
    animation-name: none;
}

index.html