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

❮ Назад Вперед ❯

CSS свойство animation-iteration-count определяет, сколько раз должна проигрываться анимация. Свойство имеет две значения: number и infinite. Значение по умолчанию - 1, но можно использовать и другие числа. 0 или отрицательные значения недопустимы. Если анимация установлена с помощью значения infinite, она будет проигрываться бесконечно.

Значение по умолчанию	1
Применяется	Ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.animationIterationCount = "infinite";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-iteration-count</h2>
    <p>Свойство animation-iteration-count определяет, сколько раз будет проигрываться анимационный цикл до её остановки.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

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

Пример, где анимация проигрывается бесконечно:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-iteration-count</h2>
    <p>Свойство animation-iteration-count определяет, сколько раз будет проигрываться анимация до её остановки.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

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

Значения

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