W3docs
ru
Войти

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

The CSS animation-iteration-count specified the number of times animation should be played. See examples and practice yourself.

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

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

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

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

Синтаксис

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

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

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

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

<!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>
Попробуйте сами »

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

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

<!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>
Попробуйте сами »

Значения

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

Практика

Практика

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