¿Te has preguntado cómo hacer que una animación en CSS se repita varias veces? Si es así, entonces quédate porque en este artículo te contaremos qué es animation iteration count y cómo funciona. Con esta pequeña herramienta, puedes definir cuántas veces quieres que se ejecute una animación, ya sea una sola vez, un número específico de veces o de manera ilimitada, así que veamos cómo puedes usarla para crear proyectos más dinámicos e interactivos.
¿Qué es animation iteration count en CSS?
La propiedad animation iteration count en CSS se utiliza para definir el número de veces que debe ejecutarse una animación. Por lo general, las animaciones están configuradas por defecto para reproducirse una sola vez, pero con esta propiedad puedes especificar si quieres que la animación se repita varias veces o si prefieres que continúe de forma infinita.
Por ejemplo, imagina que tienes un botón animado y quieres que “salte” tres veces cuando el usuario interactúa con él, o que tienes una animación que no debe detenerse nunca, como un ícono de carga. En ambos casos, animation iteration count es la propiedad que te permitirá hacerlo.
¿Para qué sirve animation iteration count en CSS?
Si te preguntas para qué sirve la propiedad animation iteration count, a continuación te contamos algunos de sus usos más comunes:
- Crear animaciones de carga: Esta propiedad es perfecta para crear efectos de carga o spinners que deben repetirse sin fin.
- Efectos temporales: Puedes definir que una animación se repita un número específico de veces para captar la atención del usuario.
- Destacar elementos: Si necesitas que un botón, un título o una imagen destaque visualmente, puedes usar esta propiedad para añadir un toque dinámico.
- Simulación de movimientos reales: Por ejemplo, si estás creando una animación que imita un “rebote” o un “parpadeo”, puedes ajustar las repeticiones para que se vea natural.
Elementos principales de animation iteration count en CSS
Antes de entrar en detalles sobre cómo implementar animation iteration count en CSS, es importante tener en cuenta sus elementos más importantes:
- Valores numéricos: Puedes asignar un número entero (1, 2, 3, etc.) que indique cuántas veces se ejecutará la animación.
- infinite: Este valor permite que la animación se ejecute indefinidamente, lo que es útil para efectos de carga o animaciones decorativas.
- Valor por defecto: Si no especificas nada, el valor predeterminado es 1, es decir, la animación se ejecutará una sola vez.
Sintaxis de animation iteration count en CSS
Veamos ahora los elementos principales de sus sintaxis:
selector {
animation-name: nombre-de-la-animacion;
animation-duration: tiempo;
animation-iteration-count: valor;
}
En ese sentido, animation-name es la propiedad que define el nombre de la animación que has creado con @keyframes
, mientras animation-duration especifica cuánto durará la animación (en segundos o milisegundos). Como tal, animation-iteration-count es la propiedad que indica cuántas veces se repetirá la animación.
Veamos ahora el siguiente ejemplo:
@keyframes salto {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
.boton {
animation-name: salto;
animation-duration: 1s;
animation-iteration-count: 3;
}
En este caso, la animación llamada salto hará que el botón suba y baje tres veces en un segundo cada vez.
Valores más comunes de animation iteration count en CSS
Los valores de animation iteration count en CSS son los que determinan la cantidad de veces que debe ocurrir una animación. Veamos a continuación los dos valores más comunes y utilizados:
Valor numérico (n)
Cuando defines un número específico, la animación se ejecutará esa cantidad exacta de veces.
animation-iteration-count: 5;
En este ejemplo, la animación se ejecutará 5 veces y luego se detendrá.
Valor infinite
Este valor hace que la animación se repita indefinidamente, por lo que es muy útil para crear animaciones continuas como íconos de carga.
animation-iteration-count: infinite;
Ejemplos de animation iteration count en CSS
Ahora, veamos un par de ejemplos de cómo usar esta propiedad, indicando diferentes valores.
.cuadro {
width: 100px;
height: 100px;
background-color: blue;
animation-name: girar;
animation-duration: 2s;
animation-iteration-count: 3;
}
@keyframes girar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
En este primer ejemplo, el elemento cuadro girará tres veces y luego se detendrá. Pero, si queremos que el giro no se detenga, tendríamos que hacerlo de la siguiente manera:
.cuadro {
animation-iteration-count: infinite;
}
Así, el resultado será un giro constante, lo que es perfecto para aquellos elementos decorativos o animaciones que deben repetirse sin fin.
¿Cómo afecta al rendimiento?
Las animaciones en CSS son muy útiles y pueden mejorar significativamente la experiencia del usuario al navegar por una página, pero siempre es importante optimizarlas. Si usas animation iteration count con un valor alto o infinite, debes asegurarte de que no afecta negativamente el rendimiento de la página, especialmente en dispositivos con menos capacidad.
Por esto, debes tener en cuenta los siguientes consejos:
- No todas las animaciones deben repetirse, así que limita las que no sean esenciales.
- Prueba el rendimiento en diferentes navegadores y dispositivos.
- Usa animaciones con duraciones y repeticiones ajustadas a lo que necesitas.
Recuerda que el equilibrio es la clave, así que anima solo lo necesario y siempre con un propósito claro. Si quieres seguir aprendiendo sobre CSS y HTML únete al Bootcamp de Desarrollo Web de KeepCoding. Con nuestro podrás dominar en pocos meses las herramientas y lenguajes de programación más demandados, para que puedas empezar una nueva carrera en un sector lleno de oportunidades como el IT.
¡Empieza ahora y transforma tu futuro!