Hinge

L’élément se balance d’un côté à l’autre depuis son bord supérieur, comme un pendule dont l’amplitude décroît.

Ajoute un effet d’attention « Swing » sur [où].
L’élément doit se balancer d’un côté à l’autre comme une enseigne suspendue, avec un grand mouvement au départ qui s’amortit vite.
Fais-le pivoter depuis son bord supérieur plutôt que depuis son centre, et joue-le une fois au déclenchement.

L’élément pivote autour d’un point tout en disparaissant en fondu.

Ajoute une animation de sortie « Rotate Out » sur [où].
L’élément doit tourner autour de son centre, d’un peu plus d’un demi-tour, tout en disparaissant en fondu : fluide, en accélérant.
Ne le retire qu’une fois la rotation terminée, et masque-le instantanément 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).

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 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 s’incline et file sur le côté en disparaissant en fondu.

Ajoute une animation de sortie « Light Speed Out » (aussi appelée lightspeed out) sur [où].
L’élément doit s’incliner et filer sur le côté en disparaissant en fondu : rapide, en accélérant à la sortie.
Évite qu’il crée une barre de défilement horizontale en passant le bord, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).