Propiedad animation-iteration-count

La propiedad animation-iteration-count establece el número de repeticiones de la animación. Por defecto, la animación se repetirá sólo 1 vez y luego volverá a su estado original. Nuestra propiedad, sin embargo, permite establecer un número específico de repeticiones o incluso establecer una repetición infinita.

Sintaxis

cssselector {
  animation-iteration-count: número entero o decimal | infinite;
}

Valores

Valor por defecto: 1.

Ejemplo . Número finito de repeticiones

En este ejemplo la animación se repetirá sólo 3 veces, y luego volverá a su estado original:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 3;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Ejemplo . Valor infinite

Y ahora la animación se repetirá infinitamente:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Véase también