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 Значение элемента наследуется от родительского элемента.

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

43.0+
4.0-42.0 -webkit-
12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-




Похожие статьи