Bounce Out

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

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 entre avec un rebond qui dépasse puis se stabilise, en grandissant ou en tombant depuis un bord.

Ajoute une animation d’entrée « Bounce In » (aussi appelée bounce in down ou bounce in up) sur [où].
L’élément doit grandir à partir d’une petite taille, dépasser sa taille normale et osciller quelques fois avant de se stabiliser : rapide et élastique.
Joue-la une seule fois pour qu’elle n’attire pas l’attention en continu, et affiche l’élément à sa place sans mouvement 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).

L’élément apparaît en fondu en glissant sur une courte distance depuis un côté jusqu’à sa position finale.

Ajoute une animation d’entrée « Fade In Directional » (aussi appelée fade in left, fade in right ou fade in down) sur [où].
L’élément doit apparaître en fondu en glissant sur une courte distance depuis un côté jusqu’à sa position finale : rapide et fluide, en ralentissant à l’arrivée, sans rebond.
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).