Zoom Out
Aussi appelée Scale Out
L’élément rétrécit et s’estompe jusqu’à disparaître.
Usages
Fermeture de modales et retrait d’éléments
Variantes
- center
- down
- left
- right
- up
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 « 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).Animations similaires
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).A
L’élément rétrécit et glisse vers un bord en disparaissant en fondu.
Usages
Fermeture de cartes
Ajoute une animation de sortie « Back Out » sur [où].
L’élément doit d’abord rétrécir légèrement sur place, puis glisser vers un bord en disparaissant en fondu : une sortie délibérée en deux temps, pas un simple fondu rapide.
Retire l’élément seulement à la fin de l’animation pour que la mise en page ne saute pas en plein mouvement, et retire-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).ABCD
Blur Out
Aussi appelée Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
L’élément devient de plus en plus flou en disparaissant en fondu ou en glissant hors de vue.
Usages
Transitions douces et sorties de texte
Ajoute une animation de sortie « Blur Out » (aussi appelée text blur out ou smoky text dissipate) sur [où].
Le contenu doit devenir de plus en plus flou en disparaissant sur place : doux et plutôt lent, comme s’il se dissolvait.
Masque ou retire l’élément seulement quand le flou est terminé, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Survolez la démo
Shrink
Aussi appelée Scale Down
L’élément rétrécit légèrement et en douceur quand le pointeur le survole.
Usages
Boutons, tuiles
Ajoute un effet au survol « Shrink » (aussi appelé scale down) sur [où].
L’élément doit rétrécir légèrement et en douceur tant que le pointeur est dessus, puis reprendre sa taille quand il sort : rapide et subtil.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.Autres animations : Entrance & Exit
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).ABCD
Blur In
Aussi appelée Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
L’élément part très flou et devient net, souvent en glissant ou en apparaissant en fondu.
Usages
Apparition de titres et de textes hero
Ajoute une animation d’entrée « Blur In » (aussi appelée text focus in, focus in ou blur text reveal) sur [où].
Le contenu doit partir très flou et transparent, puis devenir net sur place : doux et plutôt lent, sans déplacement.
Joue-la une seule fois et affiche le texte net tout de suite si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).