Cómo escalonar la entrada de elementos
Cómo secuenciar elementos de UI con un escalonado: elegir el orden, calcular los retrasos, limitar el tiempo total y saber cuándo no escalonar.
Idea clave
Escalonar significa iniciar varias animaciones en momentos ligeramente distintos para que el ojo siga una jerarquía. Elige un orden que coincida con el diseño, mantén cada retraso pequeño y limita el total para que una lista larga no tarde segundos en aparecer. El escalonado es para unos pocos elementos relacionados, no para cada fila de una tabla.
Por qué funciona el escalonado
El ojo sigue el movimiento. Cuando varios elementos se animan exactamente a la vez, se leen como un bloque; cuando empiezan un poco separados, el espectador los lee en orden, que es como se comunica la jerarquía sin etiquetas extra.
Elige el orden según el diseño
El orden del DOM no siempre es el orden visual, sobre todo en cuadrículas y filas invertidas. Usa la posición renderizada y, en idiomas de derecha a izquierda, invierte la dirección. Si los elementos son pares, un retraso uniforme está bien; si uno es el titular, que empiece primero.
El cálculo del retraso y un límite total
El tiempo total es aproximadamente el retraso multiplicado por el número de elementos, más la duración del último. Ese total es lo que el usuario experimenta. Un escalonado corto en cinco elementos resulta vivo; el mismo retraso en cuarenta filas se convierte en una cascada lenta.
Cuándo no escalonar
No escalones contenido que el usuario está esperando leer, como una página a la que acaba de navegar. No escestones en cada re-render ni en elementos que se actualizan en vivo. El escalonado es una entrada, no un comportamiento permanente.
Invertir e interrumpir
Si una lista puede cerrarse, invierte el orden para que el último en llegar sea el primero en irse. Si el usuario navega o filtra a mitad de la animación, el estado nuevo debe tomar el relevo desde la posición actual en lugar de repetir la entrada desde cero.
Accesibilidad
El movimiento reducido debe quitar el escalonado y mostrar el contenido de una vez. Evita escalonar información que el usuario necesita de inmediato y no uses el retraso para ocultar una carga lenta.
Fragmento de implementación en producción
.item {
animation: rise 260ms ease-out both;
animation-delay: calc(var(--i) * 40ms);
}
@keyframes rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.item { animation: none; }
}Principios clave para recordar
- El escalonado comunica jerarquía dejando que el ojo siga el movimiento
- Ordena por posición renderizada e invierte en diseños RTL
- Tiempo total = retraso x elementos + duración del último, así que limita la lista
- Nunca escestones contenido que el usuario está esperando leer
- El movimiento reducido debe mostrar todo de inmediato
Preguntas frecuentes
Fuentes
- Motion overview: how it works — Material Design 3
- Animation performance and frame rate — web.dev
- prefers-reduced-motion — MDN Web Docs