Animation Iteration Count
¿Qué es animation-iteration-count?
La propiedad animation-iteration-count determina cuántas veces se debe repetir el ciclo de una animación antes de detenerse de forma definitiva. Por defecto, su valor es 1, lo que significa que la animación se reproduce exactamente una vez de inicio a fin.
Valores numéricos específicos
Puedes indicar cualquier número entero positivo (como 2, 5, 10). Curiosamente, **también se permiten números fraccionarios o decimales**. Por ejemplo, un valor de 1.5 reproducirá la animación una vez completa y luego se detendrá exactamente a la mitad de su segundo recorrido.
Bucle infinito (infinite)
El valor especial infinite hace que la animación se repita indefinidamente en un loop sin fin. Esto es ideal para componentes web que deben estar en constante funcionamiento, como:
- Spinners o indicadores de carga (loaders).
- Ilustraciones animadas de fondo.
- Pequeños pulsos de estado (ej. un círculo verde que palpita para indicar que un servidor está online).
Cuándo usarlo: UX y buenas prácticas
Aunque las animaciones continuas son divertidas de crear, representan una gran amenaza para la usabilidad y el rendimiento:
- ✦ Distracción visual: El ojo humano está biológicamente programado para detectar movimiento. Si hay un banner parpadeando indefinidamente al lado de un texto, el usuario tendrá dificultades para concentrarse en la lectura.
- ✦ Consumo de batería: Mantener la GPU o la CPU renderizando elementos a 60fps continuamente consume mucha energía en dispositivos móviles.
- ✦ Regla general: Las animaciones que busquen llamar la atención del usuario (ej. un sacudón en un botón de "¡Compra ahora!") no deben repetirse más de 3 veces.
Consejo profesional
Si deseas crear una animación de entrada que luego quede estática, déjala con el valor por defecto 1 y asegúrate de aplicar fill-mode: forwards.
Ejemplo práctico
<div class="iteration-demo">
<div class="demo-card">
<span class="label">iteration-count: 1 (Por defecto)</span>
<div class="box-container"><div class="spin-box iter-1">1</div></div>
</div>
<div class="demo-card">
<span class="label">iteration-count: 3</span>
<div class="box-container"><div class="spin-box iter-3">3</div></div>
</div>
<div class="demo-card">
<span class="label">iteration-count: infinite</span>
<div class="box-container"><div class="spin-box iter-infinite">∞</div></div>
</div>
</div>Compara cómo se comporta el mismo giro en función de sus iteraciones: el morado se detiene al dar un giro, el azul da tres giros, y el verde gira indefinidamente.
Errores comunes
Practica lo aprendido
Experimenta aplicando iteraciones fraccionarias como 2.5 en tu animación para ver exactamente en qué punto se detiene.