Roll 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 glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.

Ajoute une animation d’entrée « Slide In » (aussi appelée slide in left, slide in right, slide in up ou slide in down) sur [où].
L’élément doit glisser depuis l’extérieur du bord de son conteneur jusqu’à sa place, entièrement opaque du début à la fin : rapide, avec une décélération douce et sans rebond.
Rogne-le au bord du conteneur pour qu’il ne chevauche pas ses voisins et ne crée pas de barres de défilement tant qu’il est dehors, et affiche-le directement à sa place 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 tourne et grandit à partir d’un point tout en apparaissant en fondu.

Ajoute une animation d’entrée « Swirl In » (aussi appelée swirl in forward) sur [où].
L’élément doit faire bien plus d’un tour complet en grandissant à partir d’un seul point jusqu’à sa taille normale, tout en apparaissant en fondu : rapide au début, puis ralentissant en se stabilisant.
Joue-la une seule fois sur un seul élément plutôt que sur tout un groupe, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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