Zoom In

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

L’élément passe d’un état agrandi, flou et transparent à une image nette, comme une bouffée de fumée, et inversement en sortant.

Ajoute une animation « Puff In / Puff Out » (aussi appelée puff) sur [où].
À l’apparition, l’élément doit rétrécir depuis un état agrandi, flou et transparent jusqu’à devenir net, comme une bouffée de fumée qui retombe ; à la sortie, il doit regonfler dans un flou et s’évanouir : doux et assez rapide.
Évite que l’état agrandi pousse la mise en page ou crée des barres de défilement, et bascule instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément part réduit et décalé, puis glisse jusqu’à sa place en reprenant sa taille normale.

Ajoute une animation d’entrée « Back In » (aussi appelée back in up ou back in down) sur [où].
L’élément doit arriver depuis l’extérieur d’un bord, réduit et légèrement transparent, puis reprendre sa taille normale une fois à sa place : un mouvement délibéré en deux temps, pas une apparition rapide.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément s’agrandit légèrement et en douceur quand le pointeur le survole.

Ajoute un effet au survol « Grow » (aussi appelé scale up) sur [où].
L’élément doit s’agrandir légèrement et en douceur tant que le pointeur est dessus, puis reprendre sa taille quand il sort : rapide et subtil.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

L’élément rétrécit et s’estompe jusqu’à disparaître.

Ajoute une animation de sortie « Zoom Out » (aussi appelée scale out) sur [où].
L’élément doit rétrécir vers son centre en s’estompant jusqu’à disparaître : rapide, en accélérant.
Ne le retire de la mise en page et du focus clavier qu’une fois disparu, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit et glisse vers un bord en disparaissant en fondu.

Ajoute une animation de sortie « Back Out » sur [où].
L’élément doit d’abord rétrécir légèrement sur place, puis glisser vers un bord en disparaissant en fondu : une sortie délibérée en deux temps, pas un simple fondu rapide.
Retire l’élément seulement à la fin de l’animation pour que la mise en page ne saute pas en plein mouvement, et retire-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).