Light Speed Out

L’élément glisse au-delà du bord d’un conteneur et disparaît.

Ajoute une animation de sortie « Slide Out » (aussi appelée slide out up ou slide out down) sur [où].
L’élément doit glisser au-delà du bord de son conteneur et disparaître, en restant entièrement opaque : rapide, en accélérant à la sortie.
Rogne-le au bord du conteneur, rends-le inaccessible au clavier et aux lecteurs d’écran une fois hors de vue, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément surgit d’un côté, incliné, puis se redresse en arrivant.

Ajoute une animation d’entrée « Light Speed In » (aussi appelée lightspeed in) sur [où].
L’élément doit surgir rapidement d’un côté, incliné comme s’il filait à toute vitesse, corriger une fois son inclinaison un peu trop loin puis se redresser en arrivant : rapide et spectaculaire, avec un ralentissement à la fin.
Évite qu’il crée une barre de défilement horizontale tant qu’il est encore hors de l’écran, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément disparaît en fondu en glissant dans une direction.

Ajoute une animation de sortie « Fade Out Directional » (aussi appelée fade out up ou fade out down) sur [où].
L’élément doit disparaître en fondu en glissant sur une courte distance dans une direction : rapide, en accélérant à la sortie.
Retire-le de la mise en page seulement à la fin du fondu pour que le contenu voisin ne saute pas trop tôt, et masque-le immédiatement 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 arrive en roulant depuis la gauche comme une roue, tout en apparaissant en fondu.

Ajoute une animation d’entrée « Roll In » sur [où].
L’élément doit arriver en roulant depuis la gauche comme une roue, en tournant sur lui-même pendant son trajet, tout en apparaissant en fondu : fluide, avec un ralentissement à l’arrivée.
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’en va en roulant vers la droite tout en disparaissant en fondu.

Ajoute une animation de sortie « Roll Out » sur [où].
L’élément doit s’en aller en roulant vers la droite comme une roue, en tournant sur lui-même pendant son trajet, tout en disparaissant en fondu : fluide, en accélérant à la sortie.
Ne le retire de la mise en page qu’une fois qu’il s’est éloigné, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).