Roll Out
L’élément s’en va en roulant vers la droite tout en disparaissant en fondu.
Usages
Retrait ludique d’éléments de liste
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
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).Animations similaires
A
L’élément pivote autour d’un point tout en disparaissant en fondu.
Usages
Retrait ludique d’éléments
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).A
Slide Out
Aussi appelée Slide Out Up, Slide Out Down
L’élément glisse au-delà du bord d’un conteneur et disparaît.
Usages
Fermeture de tiroirs et de panneaux
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).A
L’élément arrive en roulant depuis la gauche comme une roue, tout en apparaissant en fondu.
Usages
Entrée ludique d’éléments de liste
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).A
L’élément pivote sur une charnière en haut à gauche, se balance, puis tombe hors de l’écran.
Usages
Suppression d’un élément façon cartoon
Ajoute une animation de sortie « Hinge » sur [où].
L’élément doit basculer depuis son coin supérieur gauche comme si une vis s’était desserrée, se balancer d’avant en arrière, puis tomber hors de l’écran en disparaissant en fondu : lent, comique et délibéré.
Laisse-le tomber par-dessus le reste du contenu sans pousser la mise en page ni ajouter de barres de défilement, retire-le une fois tombé, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Autres animations : Entrance & Exit
A
Rotate In
Aussi appelée Rotate In Down Left
L’élément entre en pivotant autour d’un coin ou de son centre, tout en apparaissant en fondu.
Usages
Entrée ludique d’icônes ou de cartes
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).A
Slide In
Aussi appelée Slide In Up, Slide In Down, Slide In Left, Slide In Right
L’élément glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.
Usages
Tiroirs, panneaux latéraux, bannières
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).