Aussi appelée Highlight Marker, Marker Underline, Hero Highlight
Une bande de couleur façon surligneur se trace sur une expression pour la mettre en valeur.
Usages
Mise en valeur d’expressions clés
Ajoute un effet surligneur (Text Highlighter) sur [où], aussi appelé highlight marker ou marker underline.
Une bande de couleur façon surligneur doit glisser en douceur derrière l’expression clé, de gauche à droite, comme si quelqu’un la surlignait au feutre.
Joue-le une seule fois quand l’expression entre à l’écran au défilement, garde le texte lisible sur la bande et fais suivre correctement la bande quand l’expression passe sur deux lignes.
Aussi appelée Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
Au survol, un soulignement s’étend sous un lien depuis un côté ou depuis le centre.
Usages
Liens de navigation, liens dans le texte
Ajoute un effet de survol soulignement animé (Underline Draw) sur [où], aussi appelé animated underline ou hover underline animation.
Quand le pointeur survole le lien, un soulignement doit s’étendre en douceur de gauche à droite sous le texte, puis se rétracter quand le pointeur s’en va : rapide et discret.
Évite que le soulignement décale la mise en page autour et affiche le même effet au focus clavier.
Aussi appelée Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Un tracé SVG semble se dessiner le long de son chemin grâce à l’animation du décalage des tirets.
Usages
Icônes, logos et illustrations
Ajoute une animation « Line Drawing » (aussi appelée path drawing ou self-drawing SVG) sur [où].
Chaque trait doit sembler se dessiner tout seul, en douceur, le long de son chemin du début à la fin, et un second trait, comme une coche, suit juste après le premier.
Joue-la une seule fois à l’entrée à l’écran plutôt qu’en boucle, et affiche les lignes entièrement tracées si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).