W3docs
ru
Войти

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

Свойство CSS animation-iteration-count задаёт количество повторений анимации. Смотрите примеры и практикуйтесь.

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

Именно это свойство превращает однократный переход в зацикленный эффект. Используйте его вместе с animation-name, правилом @keyframes и animation-duration, чтобы управлять и тем, что делает анимация, и тем, как часто она повторяется.

Как интерпретируется значение

  • infinite — анимация повторяется бесконечно (пока страница не закрыта или свойство не удалено). Это самый распространённый выбор для фоновых эффектов, таких как спиннеры, мигающие значки и движение фона.
  • Целое число (2, 5, …) — анимация воспроизводится ровно столько полных циклов, затем фиксируется в состоянии, определённом свойством animation-fill-mode (по умолчанию возвращается к неанимированному состоянию).
  • Дробное число (0.5, 2.5, …) — анимация воспроизводит неполные циклы. Значение 0.5 запускает анимацию до середины её ключевых кадров и останавливается; 2.5 проигрывает два полных цикла плюс первую половину третьего.
  • 0 — допустимое значение, при котором анимация просто не воспроизводится.
  • Отрицательные числа являются недопустимыми, и объявление игнорируется.

Взаимодействие с другими свойствами

animation-iteration-count тесно связано со свойством animation-direction. Если количество итераций больше 1 и направление равно alternate, каждый чётный цикл воспроизводится в обратном порядке, что создаёт плавное движение туда-обратно вместо резкого возврата к началу при каждом повторении.

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

Свойство animation-iteration-count относится к свойствам CSS3 и поддерживается во всех современных браузерах. Его также можно задать в составе сокращённого свойства animation.

Начальное значение1
Применяется кВсем элементам, псевдоэлементам ::before и ::after.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS3
DOM Syntaxobject.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>
Попробуйте сами »
Информация

Использование animation-iteration-count: infinite — стандартный способ создания индикаторов загрузки. Сочетайте его с трансформацией rotate() внутри @keyframes и значением linear свойства animation-timing-function, чтобы вращение выполнялось с постоянной скоростью без пауз при замедлении.

Значения

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

Практика

Практика
Что задаёт свойство CSS 'animation-iteration-count'?
Что задаёт свойство CSS 'animation-iteration-count'?
Was this page helpful?