Cuando una transición no basta
Una transition anima de un estado A a un estado B y necesita un disparador (un
:hover, un clic...). Pero ¿y un spinner que gira solo, un corazón que late o un
elemento que parpadea? Para animaciones con varios pasos, que se repiten o
que arrancan solas, usamos @keyframes junto a la propiedad animation.
Definir los fotogramas
@keyframes latido {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
También puedes usar las palabras clave from (= 0%) y to (= 100%):
@keyframes aparecer {
from { opacity: 0; }
to { opacity: 1; }
}
Aplicar la animación
.corazon {
animation: latido 1s ease-in-out infinite;
}
La forma corta de animation admite, entre otros:
- nombre: el de los
@keyframes(latido). - duración:
1s,500ms... - función de tiempo:
ease-in-out,linear... - iteraciones: un número o
infinite. - dirección:
normal,alternate(va y vuelve)...
Accesibilidad: prefers-reduced-motion
No todo el mundo disfruta del movimiento: a algunas personas el exceso de
animación les provoca mareo o malestar real. Respeta su configuración del
sistema con la media query prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
.corazon {
animation: none; /* desactiva el movimiento */
}
}
Buena práctica: anima por defecto, pero anula las animaciones cuando el usuario pide menos movimiento. Es un requisito de accesibilidad, no un extra.
Ejemplos
Nombre de la animación referenciado por @keyframes
const animacion = "latido 1s ease-in-out infinite";
console.log(animacion);