Animation de cadre

Animation de cadre
Par défaut
VIEW MORE
Brillance 01
VIEW MORE
Brillance 02
VIEW MORE
Scintillement
VIEW MORE
Course de bordure
VIEW MORE
Néon
VIEW MORE
Laser
Transition
Animation Duration (MS)
2000
Accélération
ease-in-out
Loop Interval (MS)
1000

Peut differer legerement de l interface reelle.

Apercu des modifications
Brillance 01
Brillance 02
Scintillement
Course de bordure
Néon
Laser

This setting applies to the animation

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 pattern d’animation de la bordure du cadre. Étant donné que l’animation tourne en permanence, un réglage qui minimise la fatigue visuelle est recommandé. Les options incluent none (aucune) et différents patterns d’animation continue.

L’animation du cadre est jouée en continu (indépendamment du survol), contrairement aux animations de texte et d’icône. L’animation démarre dès le chargement de la page, ce qui attire le regard mais peut fatiguer le visiteur en cas d’effet trop prononcé. Si aucun cadre d’icône n’est configuré, ce réglage est sans effet (le DOM n’est pas généré).

Restriction d’overflow : les animations de cadre neon-01 et glow-01 utilisent box-shadow, ce qui applique automatiquement overflow: visible à l’élément de cadre. Les autres animations conservent overflow: hidden. Avec overflow: visible, l’effet de lueur peut dépasser la zone du bouton ; tenez-en compte pour l’espacement avec les éléments adjacents.

Transition

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

Point clé : définit la vitesse de lecture et l’intervalle de boucle de l’animation du cadre. Ajuste la présence de l’effet décoratif.

Impact : étant toujours visible, cet effet influence l’impression globale de la page.

Conseil : sauf objectif de mise en avant, allongez l’intervalle pour laisser la priorité au texte principal.

Paramètres

  • Animation Duration (ms) : durée d’une lecture. Trop court, l’effet paraît agité ; commencez par une valeur moyenne.
  • Easing : courbe de vitesse de l’animation du cadre. Une courbe douce réduit la gêne visuelle.
  • Loop Interval (ms) : intervalle avant la prochaine lecture. Un intervalle plus long permet de maintenir la concentration sur le contenu principal. Des valeurs par défaut sont prédéfinies.

L’animation du cadre ne dispose pas de Delay ni de Custom Value dans ses paramètres de transition : seuls Duration, Easing et Loop Interval sont disponibles. La logique de conception diffère de celle des animations de texte et d’icône (type survol), d’où une structure de transition différente.