Comment décaler l'entrée de plusieurs éléments
Comment séquencer des éléments d'interface avec un décalage : choisir l'ordre, calculer les délais, plafonner la durée totale et savoir quand ne pas décaler.
À retenir
Décaler consiste à démarrer plusieurs animations à des instants légèrement différents pour que l'œil suive une hiérarchie. Choisissez un ordre qui correspond à la mise en page, gardez chaque délai court et plafonnez le total pour qu'une longue liste n'apparaisse pas en plusieurs secondes. Le décalage sert à quelques éléments liés, pas à chaque ligne d'un tableau.
Pourquoi le décalage fonctionne
L'œil suit le mouvement. Quand plusieurs éléments s'animent exactement en même temps, ils se lisent comme un bloc ; quand ils démarrent légèrement décalés, le spectateur les lit dans l'ordre, ce qui communique la hiérarchie sans libellés supplémentaires.
Choisissez l'ordre dans la mise en page
L'ordre du DOM n'est pas toujours l'ordre visuel, surtout dans les grilles et les lignes inversées. Utilisez la position rendue et, pour les langues de droite à gauche, inversez la direction. Si les éléments sont pairs, un délai uniforme convient ; si l'un est le titre, faites-le démarrer en premier.
Le calcul du délai et un plafond total
La durée totale vaut environ le délai multiplié par le nombre d'éléments, plus la durée du dernier. C'est ce total que l'utilisateur ressent. Un décalage court sur cinq éléments paraît vif ; le même délai sur quarante lignes devient une cascade lente.
Quand ne pas décaler
Ne décalez pas du contenu que l'utilisateur attend de lire, comme une page qu'il vient d'ouvrir. Ne décalez pas à chaque nouveau rendu, ni sur des éléments qui se mettent à jour en direct. Le décalage est une entrée, pas un comportement permanent.
Inverser et interrompre
Si une liste peut se fermer, inversez l'ordre pour que le dernier arrivé soit le premier parti. Si l'utilisateur navigue ou filtre pendant l'animation, le nouvel état doit prendre le relais depuis la position courante au lieu de rejouer l'entrée depuis zéro.
Accessibilité
Le mouvement réduit doit supprimer le décalage et afficher le contenu d'un coup. Évitez de décaler des informations dont l'utilisateur a besoin tout de suite, et n'utilisez pas le délai pour masquer un chargement lent.
Extrait d’implémentation en production
.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; }
}Principes clés à retenir
- Le décalage communique la hiérarchie en laissant l'œil suivre le mouvement
- Ordonnez selon la position rendue et inversez pour les mises en page RTL
- Durée totale = délai x éléments + durée du dernier, donc plafonnez la liste
- Ne décalez jamais un contenu que l'utilisateur attend de lire
- Le mouvement réduit doit tout afficher immédiatement
Questions fréquentes
Sources
- Motion overview: how it works — Material Design 3
- Animation performance and frame rate — web.dev
- prefers-reduced-motion — MDN Web Docs