La Propiedad ANIMATION-ITERATION-COUNT

La propiedad animation-iteration-count en CSS te permite especificar cuántas veces debe repetirse una animación CSS antes de detenerse.

La propiedad animation-iteration-count en CSS te permite especificar cuántas veces debe repetirse una animación CSS antes de detenerse. Puedes definir un número específico de repeticiones o hacer que la animación se repita indefinidamente.

Sintaxis Básica

La sintaxis básica para usar la propiedad animation-iteration-count es la siguiente:

CSS
 
selector {
  animation-iteration-count: valor;
}

Donde selector es el elemento HTML al que quieres aplicar la animación y valor es el número de veces que deseas que la animación se repita.

Valores de la Propiedad animation-iteration-count

La propiedad animation-iteration-count puede tomar los siguientes valores:

1. <number>

Puedes especificar un número entero positivo para indicar la cantidad exacta de veces que la animación debe repetirse. Por ejemplo, un valor de 3 hará que la animación se ejecute tres veces en total (una vez la original y dos repeticiones).

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: moverCuadro;
    animation-duration: 2s;
    animation-iteration-count: 3; /* La animación se repetirá 3 veces */
    animation-direction: alternate;
  }

  @keyframes moverCuadro {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Este cuadro se moverá 3 veces.</div>

</body>
</html>

En este ejemplo, el cuadrado rojo se moverá de izquierda a derecha y luego de derecha a izquierda, y este ciclo se repetirá un total de tres veces.

2. infinite

Este valor hace que la animación se repita continuamente, sin detenerse.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .circulo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    animation-name: cambiarOpacidad;
    animation-duration: 1.5s;
    animation-iteration-count: infinite; /* La animación se repetirá indefinidamente */
    animation-direction: alternate;
  }

  @keyframes cambiarOpacidad {
    from { opacity: 1; }
    to { opacity: 0.3; }
  }
</style>
</head>
<body>

  <div class="circulo">Este círculo parpadeará sin parar.</div>

</body>
</html>

Aquí, el círculo parpadeará (cambiando su opacidad) de forma continua hasta que se cierre la página o se eliminen los estilos.

Ejemplos Prácticos

Ejemplo 1: Animación de Rebote Finito

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .pelota {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: green;
    position: relative;
    animation: rebote 0.8s ease-in-out 2; /* Rebota 2 veces */
  }

  @keyframes rebote {
    0% { top: 0; }
    50% { top: 50px; }
    100% { top: 0; }
  }
</style>
</head>
<body>

  <div class="pelota"></div>

</body>
</html>

En este ejemplo, la pelota rebotará hacia arriba y hacia abajo dos veces antes de detenerse.

Ejemplo 2: Animación de Carga Continua

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: girar 1.2s linear infinite; /* Gira continuamente */
  }

  @keyframes girar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>

  <div class="loader"></div>

</body>
</html>

Este es un ejemplo común de una animación que se repite indefinidamente para indicar que algo está cargando.

Relación con animation-duration y animation-delay

  • animation-duration: La duración total de la animación se calcula multiplicando el valor de animation-duration por el animation-iteration-count. Por ejemplo, si la duración es de 2 segundos y la animación se repite 3 veces, la animación completa durará 6 segundos.
  • animation-delay: El retraso especificado por animation-delay ocurre solo antes de la primera iteración de la animación. No hay retrasos entre las repeticiones.

Relación con animation-direction

La propiedad animation-iteration-count también afecta cómo se comporta una animación cuando se utiliza con la propiedad animation-direction establecida en alternate o alternate-reverse.

  • Si animation-direction es alternate y animation-iteration-count es un número par, la animación terminará en el mismo estado en el que comenzó. Si el número es impar, terminará en el estado final de la dirección "normal".
  • Si animation-direction es alternate-reverse y animation-iteration-count es un número par, la animación terminará en el mismo estado en el que comenzó. Si el número es impar, terminará en el estado final de la dirección "reverse".

Casos de Uso Comunes

  • Animaciones finitas: Usar un número específico de iteraciones para efectos como rebotes, destellos o transiciones que deben ocurrir solo una o algunas veces.
  • Animaciones infinitas: Utilizar infinite para animaciones continuas como indicadores de carga, elementos de fondo sutiles o efectos de bucle.
  • Énfasis visual: Repetir una animación un número limitado de veces para llamar la atención sobre un elemento.

Consideraciones

  • Las animaciones infinitas pueden consumir recursos del navegador si no están optimizadas. Úsalas con moderación y asegúrate de que no afecten negativamente el rendimiento de la página.
  • Considera la experiencia del usuario al decidir el número de repeticiones. Una animación que se repite demasiadas veces puede resultar molesta.

Conclusión

La propiedad animation-iteration-count te brinda el control sobre cuántas veces se ejecuta una animación CSS. Ya sea que necesites un efecto que ocurra solo unas pocas veces o una animación continua, esta propiedad te permite definir el comportamiento de repetición de tus efectos visuales. ¡Experimenta con diferentes valores para crear animaciones que se adapten perfectamente a tus necesidades!