animation-iteration-count¶

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

Переходы и Анимации

@keyframes

Синтаксис¶

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

animation-iteration-count: 2, 0, infinite;

Значения¶

infinite: Анимация повторяется бесконечно.
<число>: Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации.

Значение по-умолчанию:

animation-iteration-count: 1;

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

Спецификации¶

CSS Animations

Поддержка браузерами¶

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>animation-iteration-count</title>
    <style>
      .blink {
        -webkit-animation: blink 1s;
        -webkit-animation-iteration-count: infinite;
        animation: blink 1s;
        animation-iteration-count: infinite;
      }
      @-webkit-keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="blink">
      Мигающий текст привлекает к себе внимание, не правда
      ли.
    </div>
  </body>
</html>

В данном примере установлено бесконечное мигание выбранного текста.

Примечание¶

Chrome, Safari и Android поддерживают свойство -webkit-animation-iteration-count.
Opera до версии 12.10 поддерживает свойство -o-animation-iteration-count.
Firefox до версии 16 поддерживает свойство -moz-animation-iteration-count.