Backdrop Scrim Fade

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).

Une miniature s’agrandit depuis sa place jusqu’à une grande vue centrée sur un fond assombri.

Ajoute un « Lightbox Zoom » (aussi appelé image zoom overlay ou Medium-style zoom) sur [où].
Un clic sur une miniature doit la faire grandir en douceur depuis sa place jusqu’à une grande vue centrée pendant que la page derrière s’estompe, et la fermeture doit la faire rétrécir jusqu’à la même place.
Ferme-la avec Échap ou un clic sur le fond, place le focus dans la vue tant qu’elle est ouverte et rends-le à la miniature ensuite.

L’élément passe sur place de totalement transparent à totalement opaque, ou l’inverse quand il disparaît.

Ajoute une animation de fondu (Fade In / Fade Out) sur [où], aussi appelée fade.
L’élément doit passer sur place de totalement transparent à totalement visible quand il apparaît, et disparaître en fondu de la même façon quand il s’en va : doux, sans déplacement ni changement d’échelle.
Une fois disparu, assure-toi qu’il ne soit plus cliquable ni accessible au clavier, et bascule instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un panneau latéral glisse depuis le bord gauche, droit ou supérieur, en poussant ou en recouvrant le contenu.

Ajoute un « Drawer Slide » (aussi appelé off-canvas ou side sheet) sur [où].
Le panneau doit glisser depuis le bord latéral par-dessus le contenu pendant que la page derrière s’assombrit, vite et en ralentissant en douceur, puis ressortir de la même façon à la fermeture.
Garde le focus clavier dans le tiroir ouvert, ferme-le avec Échap ou un clic sur la zone assombrie, et rends le focus au bouton qui l’a ouvert.

Un panneau glisse depuis le bord inférieur, souvent déplaçable et aimanté à certaines hauteurs.

Ajoute un « Bottom Sheet Slide-Up » (aussi appelé bottom drawer ou sheet) sur [où].
Le panneau doit monter depuis le bord inférieur pendant que la page derrière s’assombrit, en ralentissant doucement jusqu’à sa place, sans rebond.
Joue-le une fois à chaque ouverture, fais-le redescendre à la fermeture, et garde le focus clavier dans le panneau tant qu’il est ouvert.

Les diapositives restent en place et se fondent l’une dans l’autre au lieu de glisser.

Ajoute un « Carousel Crossfade » (aussi appelé fade slideshow ou carousel fade) sur [où].
Les diapositives doivent rester en place et se fondre lentement l’une dans l’autre, l’ancienne disparaissant pendant que la suivante apparaît en même temps, puis rester affichées quelques secondes avant le changement suivant.
Reviens à la première diapositive sans coupure, mets en pause au survol ou au focus, et ne fais pas défiler automatiquement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les diapositives défilent horizontalement dans une fenêtre visible et s’aimantent une à une en place.

Ajoute un carrousel (Carousel Slide, aussi appelé slider ou swipe carousel) sur [où].
Chaque étape doit faire glisser la rangée latéralement pour que la diapositive suivante s’aimante au centre, fluide et en ralentissant, avec les voisines qui dépassent sur les bords et les points de position qui suivent.
Avance d’une diapositive à la fois, prends en charge le balayage tactile ainsi que les boutons et les flèches du clavier, et donne des libellés aux contrôles pour les lecteurs d’écran.