CSS
Construye animaciones con @keyframes y propiedades de duración, iteración, dirección, fill mode, play state y composición.
Una CSS animation reproduce keyframes según duración, iteración, dirección y timeline.
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.status {
animation: pulse 1.5s ease-in-out infinite;
}@keyframes enter {
from {
opacity: 0;
translate: 0 0.5rem;
}
to {
opacity: 1;
translate: 0 0;
}
}from equivale a 0%; to, a 100%. Puedes declarar estados intermedios.
animation-name: enter;
animation-duration: 300ms;
animation-timing-function: ease-out;
animation-delay: 0ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-play-state: running;none → no aplica estilos fuera del intervalo
forwards → conserva estado final
backwards → aplica primer keyframe durante delay
both → combina ambosNo confíes en fill-mode para establecer el estado semántico permanente. La regla base debe representar el resultado real cuando sea posible.
animation-direction: alternate;Alterna sentido en cada iteración. reverse invierte keyframes y también la curva temporal en términos del recorrido.
animation:
enter 300ms ease-out,
glow 2s ease-in-out infinite;Las listas se emparejan por índice y se repiten cuando tienen longitudes distintas.
Varias animations pueden competir por la misma property. animation-composition permite estrategias como replace, add o accumulate para propiedades compatibles.
Usa composición con cuidado: la interacción entre transform lists o valores acumulados puede ser difícil de depurar.
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes spin-gradient {
to { --angle: 1turn; }
}Registrar el tipo permite interpolación.
Animations infinitas consumen atención y recursos. Pausa cuando:
Aporta cuando comunica:
Un spinner infinito no debe ocultar errores o espera indefinida.
animationstart, animationiteration, animationend y animationcancel permiten observación. Como con transitions, no bases una operación crítica únicamente en la animación visual.
@media (prefers-reduced-motion: reduce) {
.status {
animation: none;
}
}Sustituye movimiento por estado estático visible.
¿Por qué una animation con keyframes pero sin duration parece no funcionar?
Porque animation-duration tiene valor inicial 0s y la secuencia termina inmediatamente.
Scroll snap, scroll-driven animations y view transitions conecta movimiento con navegación y timelines modernas.