Fade In Directional

L’élément monte légèrement tout en apparaissant en fondu, comme s’il se posait à sa place.

Ajoute une animation d’entrée « Fade Up » (aussi appelée fade-in-up ou reveal on scroll) sur [où].
Les éléments doivent monter légèrement en apparaissant en fondu la première fois qu’ils entrent à l’écran au défilement : discret et rapide, sans rebond.
Joue-la une seule fois et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.

Ajoute une animation d’entrée « Slide In » (aussi appelée slide in left, slide in right, slide in up ou slide in down) sur [où].
L’élément doit glisser depuis l’extérieur du bord de son conteneur jusqu’à sa place, entièrement opaque du début à la fin : rapide, avec une décélération douce et sans rebond.
Rogne-le au bord du conteneur pour qu’il ne chevauche pas ses voisins et ne crée pas de barres de défilement tant qu’il est dehors, et affiche-le directement à sa place si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément disparaît en fondu en glissant dans une direction.

Ajoute une animation de sortie « Fade Out Directional » (aussi appelée fade out up ou fade out down) sur [où].
L’élément doit disparaître en fondu en glissant sur une courte distance dans une direction : rapide, en accélérant à la sortie.
Retire-le de la mise en page seulement à la fin du fondu pour que le contenu voisin ne saute pas trop tôt, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un bref message glisse ou apparaît en fondu au bord de l’écran, reste un moment puis s’en va ; les toasts empilés se décalent pour faire de la place.

Ajoute un « Toast Slide-In » (aussi appelé snackbar ou toast notification) sur [où].
Chaque message doit monter depuis le bord de l’écran en apparaissant en fondu, avec une décélération douce ; quand un nouveau toast arrive, ceux déjà affichés doivent se décaler en douceur pour lui faire de la place.
Annonce le message aux lecteurs d’écran sans voler le focus, laisse-le affiché assez longtemps pour être lu et mets en pause la fermeture automatique au survol ou au focus.

L’élément s’allume par de brefs clignotements d’opacité, comme une enseigne néon défectueuse, avant de rester visible.

Ajoute une animation d’entrée « Flicker In » sur [où].
L’élément doit s’allumer et s’éteindre quelques fois à intervalles irréguliers, comme une enseigne néon défectueuse, avant de rester allumé : des flashs nets, sans déplacement.
Joue-la une seule fois, avec peu de flashs et assez lents pour ne pas gêner les personnes sensibles aux lumières clignotantes, et affiche-le allumé en continu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).