Propiedad animation-iteration-count de CSS

La propiedad CSS animation-iteration-count define cuántas veces se debe reproducir la animación. Acepta dos tipos de valores: un número o la palabra clave infinite. El valor predeterminado es 1. Cero es un valor válido (la animación no se reproducirá), pero los valores negativos no son válidos. La palabra clave infinite especifica que la animación debe repetirse para siempre.

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.

Valor inicial	1
Se aplica a	Todos los elementos, pseudo-elementos ::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

css

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

html

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

Try it Yourself »

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

Ejemplo de la propiedad CSS animation-iteration-count con valor infinite

html

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

Try it Yourself »

Valores

Valor	Descripción	Reproducir
number	Define cuántas veces se debe reproducir la animación. El valor predeterminado es 1.	Reproducir »
infinite	La animación se reproduce sin detenerse.	Reproducir »
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 se debe repetir 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 alternar entre ambas.Puede establecerse en 'infinite' para que una animación se repita indefinidamente.

Propiedad animation-iteration-count de CSS ​

Sintaxis ​

Ejemplo de la propiedad animation-iteration-count: ​

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