Animation de texte

Hover

L’apparence peut légèrement différer de la version réelle.

Point clé : sélectionne l’animation appliquée au survol. Crée un retour visuel pour signaler à l’utilisateur que l’élément est interactif.

Impact : un changement au survol fait percevoir l’élément comme « actionnable ».

Conseil : privilégiez des animations courtes et discrètes qui ne nuisent pas à la lisibilité.

Paramètres

• Sélection du preset d’animation : choisit le mouvement du texte. Commencez par un effet discret pour préserver la lisibilité. Les options incluent none (aucune) et différents patterns d’animation au survol.

L’animation de texte ne se déclenche qu’au survol. Pendant l’animation, le texte peut devenir momentanément moins lisible ; une Duration courte est donc recommandée. En combinaison avec la transition de style, les Duration/Delay des deux peuvent s’additionner et créer une latence perçue. Lorsque l’animation est active, un avertissement s’affiche dans le panneau de transition du style.

Limite de 30 caractères : l’animation de texte encapsule chaque caractère dans un <span> et applique un délai individuel. Ce délai n’est généré que pour les 30 premiers caractères. À partir du 31e, le mouvement est groupé.

Optimisation de l’encapsulation : lorsque l’animation est sur none, l’encapsulation par caractère est omise pour des raisons de performance. L’encapsulation est appliquée automatiquement dès qu’une animation est activée.

Transition

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la vitesse de l’animation de texte. Contrôle le mouvement tout en préservant la lisibilité.

Impact : à animation identique, le réglage de la durée change considérablement l’impression.

Conseil : si le texte devient difficile à lire pendant la transition, commencez par raccourcir la Duration et réduire le Delay.

Paramètres

• Durée (ms) : durée de l’animation. Court = réactif, long = plus théâtral.
• Délai (ms) : délai avant le début du mouvement après le survol. Un délai inutile dégrade la réactivité perçue.
• Easing : courbe de vitesse. Les courbes ease-out produisent un arrêt naturel.
• Custom Value : valeur d’easing personnalisée pour ajuster le mouvement au ton de la marque.
• Reset : réinitialise les paramètres de transition à leurs valeurs par défaut.

La transition de l’animation de texte est indépendante de la transition du style et de la transition de l’animation d’icône. Chaque Duration/Delay peut être ajusté séparément, ce qui permet de créer des effets décalés entre texte et icône.