Jack In The Box
L’élément jaillit d’un état réduit et incliné, dépasse puis se stabilise comme un diable en boîte.
Usages
Révélation surprise
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 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).Animations similaires
A
Bounce In
Aussi appelée Bounce In Down, Bounce In Up
L’élément entre avec un rebond qui dépasse puis se stabilise, en grandissant ou en tombant depuis un bord.
Usages
Badges de notification et modales ludiques
Ajoute une animation d’entrée « Bounce In » (aussi appelée bounce in down ou bounce in up) sur [où].
L’élément doit grandir à partir d’une petite taille, dépasser sa taille normale et osciller quelques fois avant de se stabiliser : rapide et élastique.
Joue-la une seule fois pour qu’elle n’attire pas l’attention en continu, et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Swirl In
Aussi appelée Swirl In Forward
L’élément tourne et grandit à partir d’un point tout en apparaissant en fondu.
Usages
Entrée d’éléments décoratifs ou de logos
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).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
Back In
Aussi appelée Back In Up, Back In Down
L’élément part réduit et décalé, puis glisse jusqu’à sa place en reprenant sa taille normale.
Usages
Éléments hero et cartes
Ajoute une animation d’entrée « Back In » (aussi appelée back in up ou back in down) sur [où].
L’élément doit arriver depuis l’extérieur d’un bord, réduit et légèrement transparent, puis reprendre sa taille normale une fois à sa place : un mouvement délibéré en deux temps, pas une apparition rapide.
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).Autres animations : Entrance & Exit
A
Light Speed In
Aussi appelée Lightspeed In
L’élément surgit d’un côté, incliné, puis se redresse en arrivant.
Usages
Entrée spectaculaire d’une bannière ou d’un titre
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).A
Light Speed Out
Aussi appelée Lightspeed Out
L’élément s’incline et file sur le côté en disparaissant en fondu.
Usages
Sortie spectaculaire
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).A
Puff In / Puff Out
Aussi appelée Puff
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.
Usages
Apparition douce d’objets
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).