Bounce In

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 jaillit d’un état réduit et incliné, dépasse puis se stabilise comme un diable en boîte.

Ajoute une animation d’entrée « Jack In The Box » sur [où].
L’élément doit jaillir d’un état minuscule et incliné, ancré sur son bord inférieur, se balancer d’un côté à l’autre au-delà de la verticale, puis se stabiliser : élastique et ludique.
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 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).

L’élément change d’échelle avec un dépassement élastique au début ou à la fin du survol.

Ajoute un effet au survol « Bounce Scale » (aussi appelé bounce in / out) sur [où].
L’élément doit grossir légèrement avec un dépassement élastique bien visible, en allant brièvement au-delà de sa taille finale avant de se stabiliser, puis rebondir de la même façon quand le pointeur sort.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

L’élément rebondit légèrement, puis rétrécit ou s’envole par un bord.

Ajoute une animation de sortie « Bounce Out » sur [où].
L’élément doit s’enfoncer légèrement, gonfler un peu au-delà de sa taille, puis rétrécir en disparaissant en fondu : court et élastique.
Retire-le de la mise en page seulement à la fin de l’animation, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un clip-path ou un masque s’agrandit depuis un bord ou un point et découvre peu à peu l’image ou le texte.

Ajoute un effet d’entrée « Clip Reveal » (aussi appelé mask reveal, wipe reveal ou image reveal) sur [où].
Un bord de découpe doit balayer de gauche à droite pour découvrir progressivement le contenu, qui reste immobile : fluide, avec un début et une fin en douceur.
Réserve l’espace de l’élément dès le départ pour que rien ne se décale, et affiche-le entièrement découvert si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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