Tracking In
Aussi appelée Text Tracking In, Letter-spacing In
Les lettres commencent très espacées et estompées, puis se resserrent jusqu’à l’espacement normal en apparaissant.
Usages
Entrée de titres
Variantes
- expand
- contract
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 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).Animations similaires
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).ABCDEF
Split Text Stagger
Aussi appelée Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Un titre est découpé en caractères, mots ou lignes qui s’animent l’un après l’autre avec un léger décalage.
Usages
Titres principaux et titres de section
Ajoute une entrée « Split Text Stagger » (aussi appelée letter stagger ou staggered text reveal) sur [où].
Découpe le titre en lettres qui montent et apparaissent en fondu l’une après l’autre avec un court délai entre elles, rapide et fluide, sans rebond.
Joue-la une seule fois quand le titre apparaît à l’écran, fais en sorte que les lecteurs d’écran le lisent comme un seul mot, et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).ABCDEF
Survolez la démo
Letter Scatter
Aussi appelée Explosive Letter Burst, Scatter Gather Letters
Les lettres s’éparpillent au survol puis reviennent, ou éclatent vers l’extérieur à l’apparition.
Usages
Liens ludiques
Ajoute un effet de survol « Letter Scatter » (aussi appelé scatter gather letters ou explosive letter burst) sur [où].
Quand le pointeur passe sur le texte, chaque lettre doit s’envoler un peu dans sa propre direction avec une légère rotation, puis se regrouper en douceur dans le mot quand le pointeur s’en va.
Garde fixe la place du mot dans la mise en page pendant que les lettres bougent, fais-le lire comme un seul mot par les lecteurs d’écran, et affiche le même effet au focus clavier.ABCDEF
Survolez la démo
Variable Font Weight Animation
Aussi appelée Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
Les lettres deviennent progressivement plus grasses ou plus fines (ou changent de largeur ou d’inclinaison) grâce aux axes d’une police variable.
Usages
Titres interactifs
Ajoute un effet de survol « Variable Font Weight Animation » (aussi appelé font weight shift) sur [où].
Tant que le pointeur survole le texte, les lettres doivent s’épaissir l’une après l’autre en une vague fluide de gauche à droite, puis s’affiner à nouveau quand le pointeur s’en va.
Utilise une police variable pour que la graisse change en douceur au lieu de sauter, évite que le titre en s’élargissant pousse le contenu voisin et affiche le même effet au focus clavier.Autres animations : Entrance & Exit
A
Zoom In
Aussi appelée Scale In, Zoom In Up, Zoom In Down
L’élément grandit depuis un état réduit et transparent jusqu’à sa taille normale en apparaissant en fondu.
Usages
Modales, lightbox d’images, popovers
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).A
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
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).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).