# Transition

> La propriété transition anime en douceur le passage d'une propriété CSS d'une valeur à une autre, par exemple lors d'un survol, sans écrire d'étapes intermédiaires.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/transition-css/

Un bouton qui change de couleur brutalement au survol paraît toujours un peu cassant ; le même changement étalé sur 200 millisecondes semble naturel. C'est tout l'intérêt de `transition` : elle indique au navigateur quelle(s) propriété(s) animer, sur quelle durée, avec quelle courbe de vitesse (`ease`, `linear`, `cubic-bezier()`) et après quel délai éventuel, sans qu'il soit nécessaire de décrire les images intermédiaires comme le ferait une `animation`.

## Usage dans WordPress

Les thèmes de blocs modernes appliquent des transitions légères sur les liens de navigation, les boutons et les images au survol, souvent définies directement dans la feuille de style générée à partir de `theme.json` ou ajoutées via un CSS personnalisé au niveau du site ou d'un bloc. Certains blocs interactifs construits avec l'API d'interactivité s'appuient aussi sur des transitions CSS pour les ouvertures de menu ou d'accordéon, plutôt que sur de l'animation pilotée en JavaScript.

## Exemple

```
.wp-block-button__link {
  background-color: #1d4ed8;
  transition: background-color 0.2s ease-in-out;
}
.wp-block-button__link:hover {
  background-color: #1e3a8a;
}
```

## Pièges fréquents

- Animer `width`, `height` ou `top`/`left` déclenche des recalculs de mise en page coûteux ; préférer `transform` et `opacity`, bien plus légers pour le navigateur.
- Une transition sur `all` anime aussi des propriétés qu'on n'avait pas anticipées, ce qui peut ralentir le rendu ou créer des effets visuels indésirables ; cibler les propriétés précises est plus sûr.
- Ne pas oublier `prefers-reduced-motion` : certains visiteurs demandent explicitement à réduire les animations, et un thème accessible doit en tenir compte.