Propriedade CSS animation-iteration-count

A propriedade CSS animation-iteration-count define quantas vezes uma animação deve ser reproduzida antes de parar. Ela aceita dois tipos de valores: um número (como 1, 3 ou 2.5) ou a palavra-chave infinite. O valor padrão é 1, portanto, por padrão, uma animação é executada exatamente uma vez.

Esta propriedade é o que transforma uma transição única em um efeito de repetição. Combine-a com animation-name, a regra @keyframes e animation-duration, e você controla tanto o que a animação faz quanto quantas vezes ela se repete.

Como o valor é interpretado

infinite — a animação se repete indefinidamente (até que a página seja fechada ou a propriedade seja removida). É a escolha mais comum para efeitos ambientes como spinners, badges pulsantes e movimento de fundo.
Um número inteiro (2, 5, …) — a animação é executada exatamente esse número de ciclos completos e, em seguida, congela no estado definido por animation-fill-mode (por padrão, retorna ao estado sem animação).
Um número fracionário (0.5, 2.5, …) — a animação executa ciclos parciais. 0.5 executa a animação até a metade dos seus keyframes e para ali; 2.5 reproduz dois ciclos completos mais a primeira metade de um terceiro.
0 — um valor válido, mas a animação simplesmente não é reproduzida.
Números negativos são inválidos e a declaração é ignorada.

Combinando com outras propriedades

animation-iteration-count funciona em conjunto com animation-direction. Se a contagem for maior que 1 e a direção for alternate, cada ciclo alternado é executado em sentido inverso, o que produz um movimento suave de vai e vem, em vez de um retorno abrupto ao início a cada repetição.

Quando múltiplos valores separados por vírgula são especificados, eles são aplicados sequencialmente às animações definidas em animation-name. Se houver menos valores do que animações, a lista é repetida. Se houver mais valores do que animações, os valores extras são ignorados.

A propriedade animation-iteration-count é uma das propriedades CSS3 e é suportada em todos os navegadores modernos. Ela também pode ser definida como parte da abreviação animation.

Valor Inicial	1
Aplica-se a	Todos os elementos, pseudo-elementos ::before e ::after.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.animationIterationCount = "infinite";

Sintaxe

Sintaxe da propriedade CSS animation-iteration-count

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

Exemplo da propriedade animation-iteration-count:

Exemplo da propriedade CSS animation-iteration-count com valor numérico

<!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>

Experimente Você Mesmo »

Exemplo da propriedade animation-iteration-count com o valor "infinite":

Exemplo da propriedade CSS animation-iteration-count com valor 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>

Experimente Você Mesmo »

Informação

Definir animation-iteration-count: infinite é a maneira padrão de criar spinners de carregamento. Combine com uma transformação rotate() dentro de @keyframes e um animation-timing-function linear para que o giro ocorra em velocidade constante, sem pausas de easing.

Valores

Valor	Descrição	Experimente
number	Define quantas vezes a animação deve ser reproduzida. O valor padrão é 1.	Experimente »
infinite	A animação é reproduzida sem parar.	Experimente »
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade CSS 'animation-iteration-count' especifica?

Determina quantas vezes uma animação deve ser repetida.Especifica a direção da animação.Define a duração da animação.Especifica se a animação deve ser reproduzida para frente, para trás ou alternando entre as duas.Pode ser definida como 'infinite' para que a animação se repita indefinidamente.