Popover / Dropdown Open

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 petite étiquette apparaît en fondu et se glisse à côté d’un élément après un court délai de survol.

Ajoute un « Tooltip Fade » (aussi appelé tooltip reveal) sur [où].
Après un court délai de survol, l’étiquette doit apparaître en fondu en se glissant légèrement à côté de l’élément, puis disparaître vite et sans délai quand le pointeur s’en va.
Affiche-le aussi au focus clavier, permets de le fermer avec Échap et relie-le à l’élément pour que les lecteurs d’écran le lisent.

L’élément grandit depuis un état réduit et transparent jusqu’à sa taille normale en apparaissant en fondu.

Ajoute une animation d’entrée « Zoom In » (aussi appelée scale in) sur [où].
L’élément doit passer de petit et transparent à sa taille normale en apparaissant en fondu : rapide et fluide, sans dépassement.
Mets-le à l’échelle depuis son centre sans affecter la mise en page autour, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un panneau de contenu s’agrandit en douceur jusqu’à sa pleine hauteur ou se réduit à zéro quand on bascule son en-tête.

Ajoute un accordéon (Accordion Expand-Collapse, aussi appelé collapse ou disclosure) sur [où].
Quand on appuie sur un en-tête, son panneau doit s’agrandir en douceur jusqu’à la hauteur réelle de son contenu, puis se refermer complètement à l’appui suivant, la flèche de l’en-tête pivotant en même temps : rapide et fluide, sans rebond.
Anime vers la hauteur réelle du contenu plutôt qu’une valeur fixe devinée, fais de l’en-tête un vrai bouton qui indique son état déplié, et rends le tout utilisable au clavier.

Un élément semble se déplacer et se redimensionner vers un élément correspondant à un nouvel endroit, comme s’il n’en formait qu’un.

Ajoute une « Shared Layout Animation » (aussi appelée shared element dans la page) sur [où].
Quand la sélection change, l’élément doit sembler se déplacer et se redimensionner en douceur de son ancienne place vers la nouvelle, en s’y posant délicatement, pour être perçu comme un seul objet et non deux.
N’affiche qu’une seule copie à tout moment et empêche la mise en page autour de sauter pendant le mouvement.

Un soulignement ou une pastille glisse de l’ancien onglet vers l’onglet nouvellement sélectionné.

Ajoute un « Tab Indicator Slide » (aussi appelé sliding underline ou active tab indicator) sur [où].
Quand un nouvel onglet est sélectionné, le soulignement doit glisser de l’ancien onglet vers le nouveau, rapide et en décélérant doucement, et s’étirer à la largeur du nouvel onglet si elle diffère.
Conserve une sémantique d’onglets correcte avec navigation aux flèches du clavier, et déplace l’indicateur sans glissement 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.