Animation de bouton

Default

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

Point clé : définit l’animation appliquée à l’état normal. Contrôle l’intensité de l’effet permanent.

Impact : le mouvement étant toujours visible, son influence sur le ton de la marque est importante.

Conseil : pour une consultation prolongée, privilégiez un réglage doux qui ne fatigue pas le regard.

Paramètres

• Sélection du preset d’animation : choisit le type d’animation du bouton complet. À utiliser pour attirer l’attention sur un point précis. Les options incluent none (aucune) et différents patterns d’animation continue.

L’animation du bouton est jouée en continu (indépendamment du survol), contrairement aux animations de texte et d’icône. Le bouton entier étant en mouvement, c’est l’effet le plus percutant ; un usage excessif peut toutefois dégrader la qualité perçue de la page et augmenter le taux de rebond. Recommandé pour des sections ciblées comme le premier écran d’une landing page. Valeurs par défaut : Duration 2000 ms, Easing ease-in-out, Loop Interval 1000 ms.

Transition

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

Point clé : définit la vitesse et l’intervalle de boucle de l’animation du bouton. Contrôle le niveau d’attention généré par le CTA.

Impact : le bouton entier étant en mouvement, l’effet d’appel est fort, mais un réglage excessif peut provoquer l’abandon.

Conseil : réservez cet effet aux sections ciblées et réduisez l’intensité dans les pages courantes.

Paramètres

• Animation Duration (ms) : durée d’un cycle de lecture. Ajuste le rythme de l’effet.
• Easing : type de courbe de vitesse. Ajuste la fluidité du mouvement pour un rendu naturel.
• Custom Value : valeur d’easing personnalisée. Utilisez-la si les presets ne correspondent pas.
• Loop Interval (ms) : intervalle entre les boucles. Un intervalle trop court donne un aspect agité.
• Reset : réinitialise les paramètres de transition à leurs valeurs par défaut.

L’animation du bouton et l’animation du cadre peuvent être utilisées simultanément, mais si les deux sont actives, l’ensemble peut devenir visuellement chargé. En cas d’utilisation combinée, modérez l’un des deux effets.

Conflit de propriétés transform : la plupart des animations du bouton utilisent les propriétés CSS transform (translateX, translateY, scale, rotate, etc.). Elles s’appliquent sur un calque différent du Transform Translate du layout ou du Skew du band, il n’y a donc pas de conflit direct. En revanche, si un CSS personnalisé ajoute une transform directement sur le bouton, celle-ci sera écrasée pendant l’animation.

prefers-reduced-motion non pris en charge : dans l’implémentation actuelle, la media query prefers-reduced-motion ne désactive pas automatiquement les animations. Même si l’utilisateur a activé « Réduire les animations » dans son système, les animations seront jouées. Pour une prise en compte de l’accessibilité, envisagez d’ajouter un CSS dédié côté thème.