List Item Enter/Exit

Après un changement de mise en page, les éléments glissent en douceur vers leurs nouvelles positions et tailles.

Ajoute une « FLIP Layout Animation » (aussi appelée layout animation ou First-Last-Invert-Play) sur [où].
Quand la mise en page change, chaque élément doit glisser de son ancienne position vers la nouvelle au lieu de sauter, vite au début puis en se posant en douceur.
Anime uniquement avec des transforms pour que la page ne recalcule pas sa mise en page à chaque image, et passe directement à la nouvelle mise en page si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Quand on applique un filtre ou un tri, les tuiles de la grille se réorganisent, disparaissent en fondu ou glissent vers de nouveaux emplacements.

Ajoute un effet « Masonry / Grid Shuffle » (aussi appelé filterable grid animation) sur [où].
Quand un filtre est appliqué, les tuiles qui ne correspondent plus doivent rétrécir et disparaître en fondu sur place, pendant que les autres glissent en douceur vers leurs nouveaux emplacements ; retirer le filtre joue l’inverse.
Empêche la page autour de sauter pendant que la hauteur de la grille change, et fais des contrôles de filtre de vrais boutons qui indiquent le filtre sélectionné.

Les éléments d’un groupe s’animent l’un après l’autre avec un léger décalage, formant une vague au lieu d’apparaître tous en même temps.

Ajoute une animation « Stagger » (aussi appelée staggered animation ou cascade) sur [où].
Les éléments doivent apparaître en montant l’un après l’autre avec un décalage court et régulier, pour que le groupe forme une vague rapide plutôt que d’apparaître d’un coup.
Garde la séquence courte même pour de longues listes, joue-la une seule fois à l’entrée à l’écran et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Glisser une ligne de liste sur le côté révèle des boutons d’action comme supprimer ou archiver.

Ajoute une interaction « Swipe to Delete » (aussi appelée swipe actions ou swipe to reveal) sur [où].
Quand on fait glisser une ligne sur le côté, elle doit suivre directement le doigt pour découvrir derrière elle des boutons d’action comme archiver et supprimer, s’arrêter une fois qu’ils sont entièrement visibles, et au relâchement glisser en douceur à sa place, sans rebond.
Garde le défilement vertical fonctionnel pendant le glissement horizontal, et rends les mêmes actions accessibles au clavier et aux lecteurs d’écran sans glisser.

Une ligne de contenu défile latéralement en boucle infinie, sans coupure.

Ajoute un texte défilant (Marquee) sur [où] : une bande qui défile horizontalement à l’infini, aussi appelée ticker.
Le contenu doit défiler de droite à gauche à une vitesse lente et régulière, en boucle continue sans saut visible.
Mets-le en pause au survol et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une boîte de dialogue apparaît en fondu en grandissant légèrement depuis son centre, au-dessus d’une page assombrie.

Ajoute une animation « Modal Scale-Fade In » (aussi appelée dialog open animation ou zoom-fade dialog) sur [où].
La boîte de dialogue doit apparaître en fondu en grandissant légèrement depuis son centre pendant que la page derrière s’assombrit : rapide et discret, sans rebond.
Joue-la une fois à chaque ouverture, place le focus dans la boîte et garde-le dedans, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).