Propiedad CSS animation-iteration-count

La propiedad CSS animation-iteration-count define cuántas veces debe reproducirse una animación antes de detenerse. Acepta dos tipos de valores: un número (como 1, 3 o 2.5) o la palabra clave infinite. El valor predeterminado es 1, por lo que de forma predeterminada una animación se ejecuta exactamente una vez.

Esta propiedad es la que convierte una transición de un solo ciclo en un efecto de bucle. Combínala con animation-name, la regla @keyframes y animation-duration, y podrás controlar tanto qué hace la animación como cuántas veces se repite.

Cómo se interpreta el valor

infinite — la animación se repite indefinidamente (hasta que se cierre la página o se elimine la propiedad). Es la opción más habitual para efectos ambientales como spinners, badges pulsantes y movimiento de fondo.
Un número entero (2, 5, …) — la animación se reproduce exactamente ese número de ciclos completos y luego se congela en el estado definido por animation-fill-mode (de forma predeterminada vuelve al estado sin animar).
Un número fraccionario (0.5, 2.5, …) — la animación reproduce ciclos parciales. 0.5 ejecuta la animación hasta la mitad de sus keyframes y se detiene ahí; 2.5 reproduce dos ciclos completos más la primera mitad de un tercero.
0 — es un valor válido, pero la animación simplemente no se reproduce.
Los números negativos son inválidos y la declaración se ignora.

Combinación con otras propiedades

animation-iteration-count trabaja de la mano con animation-direction. Si el contador es mayor que 1 y la dirección es alternate, cada ciclo alterno se ejecuta en sentido inverso, lo que produce un movimiento suave de ida y vuelta en lugar de un salto brusco al inicio en cada repetición.

Cuando se especifican varios valores separados por comas, se aplican secuencialmente a las animaciones definidas en animation-name. Si hay menos valores que animaciones, la lista se repite. Si hay más valores que animaciones, los valores adicionales se ignoran.

La propiedad animation-iteration-count es una de las propiedades CSS3 y está soportada en todos los navegadores modernos. También puede establecerse como parte de la abreviatura animation.

Valor inicial	1
Se aplica a	Todos los elementos y los pseudoelementos ::before y ::after.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.animationIterationCount = "infinite";

Sintaxis

Sintaxis de la propiedad CSS animation-iteration-count

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

Ejemplo de la propiedad animation-iteration-count:

Ejemplo de la propiedad CSS animation-iteration-count con 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>

Pruébalo tú mismo »

Ejemplo de la propiedad animation-iteration-count con el valor "infinite":

Ejemplo de la propiedad CSS animation-iteration-count con 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>

Pruébalo tú mismo »

Información

Usar animation-iteration-count: infinite es la forma estándar de crear spinners de carga. Combínalo con una transformación rotate() dentro de @keyframes y una animation-timing-function linear para que el giro se ejecute a velocidad constante sin pausas de aceleración.

Valores

Valor	Descripción	Reproducirlo
number	Define cuántas veces debe reproducirse la animación. El valor predeterminado es 1.	Reproducirlo »
infinite	La animación se reproduce sin detenerse.	Reproducirlo »
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué especifica la propiedad CSS 'animation-iteration-count'?

Determina cuántas veces debe repetirse una animación.Especifica la dirección de la animación.Establece la duración de la animación.Especifica si la animación debe reproducirse hacia adelante, hacia atrás o alternando entre ambas.Puede establecerse en 'infinite' para que una animación se repita indefinidamente.