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

Свойство CSS animation-iteration-count определяет, сколько раз должен воспроизводиться анимационный цикл. Оно принимает два типа значений: число или ключевое слово infinite. Значение по умолчанию равно 1. Ноль является допустимым значением (анимация не воспроизведётся), но отрицательные значения недопустимы. Ключевое слово infinite указывает, что анимация должна повторяться бесконечно.

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

Свойство animation-iteration-count является одним из свойств CSS3.

Начальное значение	1
Применяется к	Всем элементам, псевдоэлементам ::before и ::after.
Наследуется	Нет.
Поддаётся анимации	Нет.
Версия	CSS3
Синтаксис DOM	object.style.animationIterationCount = "infinite";

Синтаксис

Синтаксис свойства CSS animation-iteration-count

css

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

Пример свойства animation-iteration-count:

Пример использования свойства CSS animation-iteration-count со значением числа

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(50%);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Try it Yourself »

Пример свойства animation-iteration-count со значением "infinite":

Пример использования свойства CSS animation-iteration-count со значением infinite

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(50%);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count property sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Воспроизвести
number	Определяет, сколько раз должна воспроизводиться анимация. Значение по умолчанию — 1.	Воспроизвести »
infinite	Анимация воспроизводится без остановки.	Воспроизвести »
initial	Устанавливает свойству значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что указывает свойство CSS 'animation-iteration-count'?

Оно определяет, сколько раз должна повторяться анимация.Оно указывает направление анимации.Оно задаёт длительность анимации.Оно указывает, должна ли анимация воспроизводиться вперёд, назад или чередоваться между ними.Ему можно задать значение 'infinite', чтобы анимация повторялась бесконечно.

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

Синтаксис ​

Пример свойства animation-iteration-count: ​

Пример свойства animation-iteration-count со значением "infinite": ​