Skip to main content
View as Markdown

Animations

Le bloc theme.animations définit des jetons de design de mouvement — animations nommées, durées et courbes d'accélération réutilisables, et définitions @keyframes. Les jetons génèrent du CSS que tout composant peut référencer via sa className.

theme.animations

animations est une table indexée par nom de jeton (alphanumérique, doit commencer par une lettre). Chaque valeur prend l'une des quatre formes, offrant un éventail allant d'une bascule sur une ligne à une définition de keyframe complète.

Forme de valeur À utiliser pour
Booléen Activer ou désactiver une animation nommée : fadeIn: true.
Chaîne Une valeur d'animation CSS brute ou un nom de classe utilitaire : slideUp: 'animate-slide-up'.
Objet de configuration Contrôle détaillé : enabled, duration, easing, delay, keyframes.
Table de jetons Une table imbriquée de jetons de design duration, easing ou keyframes nommés.

Formes booléenne et chaîne

Le moyen le plus rapide d'activer une animation intégrée, ou de créer un alias de nom de classe.

theme:
  animations:
    fadeIn: true
    slideUp: 'animate-slide-up'

Forme objet de configuration

Une animation détaillée avec contrôle du timing.

Propriété Description
enabled Booléen. Indique si l'animation est active.
duration Durée CSS (par ex. '300ms', '0.5s').
easing Fonction CSS d'accélération/temporisation (par ex. 'ease-in-out', cubic-bezier(...)).
delay Durée CSS à attendre avant de démarrer (par ex. '0ms').
keyframes Table de définition de keyframe en ligne. 
theme:
  animations:
    modalOpen:
      enabled: true
      duration: '300ms'
      easing: 'ease-in-out'
      delay: '0ms'

Tables de jetons imbriquées

Pour un système de mouvement réutilisable, déclarez duration, easing et keyframes comme tables de jetons nommés. Les autres animations et classes de composants peuvent alors référencer ces jetons au lieu de répéter des valeurs brutes.

theme:
  animations:
    duration:
      fast: '200ms'
      normal: '300ms'
      slow: '500ms'
    easing:
      smooth: 'cubic-bezier(0.4, 0, 0.2, 1)'
      bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
    keyframes:
      fadeIn:
        from: { opacity: '0' }
        to: { opacity: '1' }
      colorPulse:
        '0%': { backgroundColor: '$colors.primary' }
        '50%': { backgroundColor: '$colors.accent' }
        '100%': { backgroundColor: '$colors.primary' }
Table de jetons Règle de clé Valeur
duration Alphanumérique, commence par une lettre. Chaîne de durée CSS.
easing Alphanumérique, commence par une lettre. Fonction CSS d'accélération/temporisation.
keyframes Alphanumérique, commence par une lettre. Une table de keyframe (from/to ou paliers en pourcentage).

Note d'écoconception

Le mouvement est un enjeu d'empreinte. Préférez des durées courtes et évitez les longues animations infinies au premier rendu. La posture éco de Sovrium est contrôlée par l'opérateur via des variables d'environnement, et non par le schéma de thème — consultez la référence des Variables d'environnement pour les contrôles ECO_* qui régissent le comportement client.

Étapes suivantes