Swirl In

L’élément entre en pivotant autour d’un coin ou de son centre, tout en apparaissant en fondu.

Ajoute une animation d’entrée « Rotate In » (aussi appelée rotate in down left) sur [où].
L’élément doit pivoter jusqu’à sa place autour de son coin inférieur gauche, depuis un angle incliné, tout en apparaissant en fondu : fluide et posé, avec un ralentissement en se stabilisant.
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 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).

Les lettres commencent très espacées et estompées, puis se resserrent jusqu’à l’espacement normal en apparaissant.

Ajoute une animation de texte « Tracking In » (aussi appelée text tracking in ou letter-spacing in) sur [où].
Les lettres doivent commencer très espacées et pâles, puis se resserrer jusqu’à l’espacement normal en devenant entièrement visibles : fluide, avec un ralentissement à la fin.
Garde le texte centré et sur une seule ligne pendant le changement d’espacement pour que la mise en page autour ne bouge pas, et affiche-le avec l’espacement normal 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).