# 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.

```yaml
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.                                                 |

```yaml
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.

```yaml
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). |

:::callout
**Référencez les couleurs du thème dans les keyframes.** Les valeurs de keyframe peuvent référencer d'autres jetons de thème avec la syntaxe `$colors.<name>` (par ex. `backgroundColor: '$colors.primary'`), gardant le mouvement synchronisé avec votre palette.
:::

## 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](/fr/docs/env-vars) pour les contrôles `ECO_*` qui régissent le comportement client.

## Étapes suivantes

- [Thème](/fr/docs/theme) — la référence complète des jetons de thème.
- [Design responsive](/fr/docs/responsive-design) — points de rupture et surcharges par point de rupture.
- [Vue d'ensemble des pages](/fr/docs/pages-overview) — application des classes d'animation aux composants.