Propriedade animation-iteration-count: Quantas vezes a animação se repete?

Defina se a animação deve rodar uma vez, infinitamente ou um número específico de vezes.

Você já tem o "roteiro" (@keyframes), o "ator" (animation-name), a "duração" (animation-duration) e o "ritmo" (animation-timing-function) da sua animação, e até mesmo o "quando" ela começa (animation-delay). Agora, vamos definir quantas vezes essa animação deve ser executada. É para isso que serve a propriedade animation-iteration-count.

A animation-iteration-count é como o "contador de repetições" da sua animação. Ela determina se a animação deve rodar uma única vez, um número específico de vezes, ou se deve se repetir infinitamente, criando um loop contínuo.

Como funciona animation-iteration-count

Esta propriedade aceita um número ou a palavra-chave infinite.

Valores possíveis:

  • 1 (padrão): A animação será executada uma única vez.
  • <número>: Um número inteiro ou decimal que especifica quantas vezes a animação deve se repetir. Por exemplo, 2 fará a animação rodar duas vezes, 0.5 fará ela rodar metade de um ciclo.
  • infinite: A animação se repetirá indefinidamente, criando um loop contínuo.

Sintaxe:

.elemento {
  animation-iteration-count: <valor>;
}

Exemplos:

1. Animação que roda uma vez (padrão):

@keyframes moverDireita {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* ... outras propriedades ... */

  animation-name: moverDireita;
  animation-duration: 2s;
  /* animation-iteration-count: 1; (Não precisa declarar, pois é o padrão) */
}

Resultado: A caixa se move da esquerda para a direita uma única vez e para no estado final.

2. Animação que roda 3 vezes:

@keyframes pulsar {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  /* ... outras propriedades ... */

  animation-name: pulsar;
  animation-duration: 1.5s;
  animation-iteration-count: 3; /* A animação de pulso rodará 3 vezes */
}

Resultado: A caixa pulsa 3 vezes e para no estado final (que é o estado inicial do @keyframes).

3. Animação que roda infinitamente:

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* ... outras propriedades ... */

  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite; /* A animação de giro rodará sem parar */
  animation-timing-function: linear;
}

Resultado: A caixa gira 360 graus em 2 segundos, repetidamente e sem parar.

4. Múltiplas contagens de iteração para múltiplas animações:

Se você aplicou múltiplas animações com animation-name (separadas por vírgula), você pode fornecer uma contagem de iteração para cada uma delas, também separadas por vírgula. A ordem deve corresponder à ordem dos nomes das animações.

@keyframes moverDireita {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

@keyframes mudarCor {
  0% { background-color: blue; }
  50% { background-color: green; }
  100% { background-color: blue; }
}

.box {
  width: 100px;
  height: 100px;
  /* ... outras propriedades ... */

  animation-name: moverDireita, mudarCor;
  animation-duration: 2s, 3s;
  animation-iteration-count: 1, infinite; /* 'moverDireita' roda 1 vez, 'mudarCor' roda infinitamente */
}

Resultado: A animação de movimento (moverDireita) roda uma vez e para, enquanto a animação de mudança de cor (mudarCor) roda infinitamente.

Dicas para animation-iteration-count:

  • Loaders e Efeitos de Fundo: infinite é perfeito para loaders, indicadores de progresso, ou efeitos visuais de fundo que devem ser contínuos.
  • Feedback Visual: Um número limitado de repetições pode ser usado para dar feedback ao usuário (ex: um ícone que balança 2 vezes para chamar atenção).
  • 0.5: Usar um valor decimal como 0.5 fará a animação rodar apenas metade do seu ciclo.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>animation-iteration-count</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f2f5;
      margin: 0;
    }

    /* --- Definição da Animação de Pulso --- */
    @keyframes pulsar {
      0% { transform: scale(1); background-color: #007bff; }
      50% { transform: scale(1.2); background-color: #28a745; }
      100% { transform: scale(1); background-color: #007bff; }
    }

    .box {
      width: 100px;
      height: 100px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      margin: 10px;
      animation-name: pulsar; /* Todas usarão a animação de pulso */
      animation-duration: 1.5s; /* Todas durarão 1.5 segundos */
      animation-timing-function: ease-in-out;
    }

    /* --- Exemplos de animation-iteration-count --- */

    .box-uma-vez {
      animation-iteration-count: 1; /* Roda uma vez */
    }

    .box-duas-vezes {
      animation-iteration-count: 2; /* Roda duas vezes */
    }

    .box-meia-vez {
      animation-iteration-count: 0.5; /* Roda metade de um ciclo */
    }

    .box-infinita {
      animation-iteration-count: infinite; /* Roda infinitamente */
    }

    .box-multiplas-contagens {
      animation-name: pulsar, girar; /* Supondo que 'girar' esteja definida */
      animation-duration: 1.5s, 2s;
      animation-timing-function: ease-in-out, linear;
      animation-iteration-count: 2, infinite; /* Pulsar 2x, Girar infinito */
      background-color: #ffc107; /* Cor base para esta caixa */
    }

    /* Definição de @keyframes para a animação 'girar' */
    @keyframes girar {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="box box-uma-vez">1 Vez</div>
  <div class="box box-duas-vezes">2 Vezes</div>
  <div class="box box-meia-vez">0.5 Vez</div>
  <div class="box box-infinita">Infinita</div>
  <div class="box box-multiplas-contagens">Múltiplas Contagens</div>
</body>
</html>

Resultado:

  • Observe como cada caixa pulsa um número diferente de vezes.
  • A caixa "0.5 Vez" para no meio do pulso.
  • A caixa "Infinita" continua pulsando sem parar.
  • A caixa "Múltiplas Contagens" demonstra a combinação de animações com diferentes repetições.

Com animation-iteration-count, você controla a "repetição" da sua animação, definindo se ela é um evento único, um ciclo limitado ou um loop contínuo.