Staggering: animaciones en cascada con delay y variables

Cuando una lista entera aparece de golpe, el ojo la recibe como UN bloque. Cuando sus elementos entran uno tras otro con 60ms de diferencia, el ojo los recorre en orden — la interfaz "se presenta". Ese desfase se llama staggering, es la firma de las interfaces premium (incluida la que estás usando ahora mismo), y se construye con dos cosas que ya sabes: animation-delay y variables CSS.

La ola del estadio

Versión artesanal → versión con variables

La forma ingenua funciona, pero no escala:

La forma profesional mueve el DATO al HTML y la FÓRMULA al CSS:

<ul class="lista">
<li class="item" style="--i: 0">Notificaciones</li>
<li class="item" style="--i: 1">Mensajes</li>
<li class="item" style="--i: 2">Ajustes</li>
<li class="item" style="--i: 3">Perfil</li>
</ul>

Cambias el ritmo de TODA la ola tocando un solo número (60ms), y el ítem 15 funciona igual que el 2 sin escribir una regla más. El --i en el HTML puede molestarte ("¿un dato en el markup?") — nota honesta: sí, es un índice a mano, y cuando el HTML lo genere JavaScript o un framework (módulo 14 y cursos siguientes), el índice saldrá del bucle gratis. En HTML estático, es el costo de no repetir CSS.

¿Y ese backwards en la línea de animation? Es la vacuna de la lección 2 aplicada donde más se necesita: aquí TODOS los ítems menos el primero tienen delay. Sin fill-mode: backwards, la lista entera se ve un instante, desaparece y va entrando — el parpadeo estroboscópico que delata un stagger amateur. Es EL bug de esta técnica: si tu cascada parpadea al cargar, ya sabes dónde mirar.

La ola, en vivo

<div class="tablero" id="tablero">
<div class="ficha" style="--i: 0">Bandeja</div>
<div class="ficha" style="--i: 1">Enviados</div>
<div class="ficha" style="--i: 2">Borradores</div>
<div class="ficha" style="--i: 3">Archivo</div>
<div class="ficha" style="--i: 4">Papelera</div>
</div>
<p class="nota">La entrada corre al cargar el preview (pestaña "Resultado" de nuevo para repetirla). Una sola @keyframes; cinco turnos.</p>

body { font-family: system-ui; padding: 24px; background: #f8fafc; }
.tablero { display: grid; gap: 10px; max-width: 300px; }
@keyframes entrar {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
.ficha {
padding: 13px 16px; background: white; border: 1px solid #e2e8f0;
border-left: 4px solid #6d28d9; border-radius: 10px;
font-size: 14px; font-weight: 600; color: #1e293b;
animation: entrar 400ms ease-out backwards;
animation-delay: calc(var(--i) * 90ms);
}
@media (prefers-reduced-motion: reduce) { .ficha { animation: none; } }
.nota { font-size: 13px; color: #64748b; margin-top: 16px; max-width: 46ch; }

Sobre el paso de la ola: 40-90ms entre elementos es el rango dulce (esta plataforma usa 40ms). Menos de 30ms y el ojo ve todo junto; más de 150ms y el usuario ESPERA a que tu lista termine el show — el stagger decora la carga, jamás la retrasa perceptiblemente.

Encadenar animaciones distintas

El stagger repite UNA animación con turnos. Encadenar es otra necesidad: que el badge ENTRE y, ya adentro, PULSE. Un elemento acepta varias animaciones separadas por coma — con sus delays sumados a mano:

El delay del segundo eslabón = duración del primero. Es coordinación manual y frágil si la cadena crece — nota honesta: para secuencias de verdad complejas (cinco pasos, reversas, pausas), CSS se queda corto y esa es EXACTAMENTE la puerta por la que entrará GSAP en el módulo 16. Hasta tres eslabones, esto es limpio y suficiente.

Mini-reto

Dale entrada escalonada a las tarjetas de la portada de "El Observador": --i en cada una, la fórmula calc(), 60ms de paso y su backwards. Luego provoca el bug: quita el backwards, recarga, y confirma que ahora DETECTAS el parpadeo que antes ni habrías notado. (Y el @media de reduced-motion, que las cascadas marean más que casi cualquier efecto.)

Qué sigue

Con keyframes, panel de control, regla de oro y stagger, ya puedes construir el vocabulario visual que TODA app necesita mientras trabaja: spinners, skeleton screens con brillo deslizante y puntos que bailan. Lección de loading states — pura práctica.