transition en CSS : animer un changement d'état sans une ligne de JavaScript

Faire apparaître une ombre au survol d'une carte, changer la couleur d'un bouton progressivement plutôt que d'un coup, ou glisser un panneau hors de l'écran : toutes ces animations simples reposent sur une seule propriété, transition, sans qu'une seule ligne de JavaScript ne soit nécessaire.

Elle transforme un changement de style habituellement instantané en un mouvement progressif, réparti sur une durée choisie, ce qui rend une interface bien plus agréable à utiliser qu'un enchaînement d'états qui se succèdent sans transition visuelle.

Définition

transition anime automatiquement le passage d'une propriété CSS d'une valeur à une autre, à chaque fois que cette valeur change, que ce soit au survol, au clic, ou suite à l'ajout d'une classe en JavaScript. Elle repose sur quatre réglages combinés : la propriété à animer, la durée de l'animation, sa courbe d'accélération et un délai optionnel avant le démarrage.

.bouton {
  background-color: #1d4ed8;
  transition: background-color 0.3s ease-in-out;
}
.bouton:hover {
  background-color: #1e3a8a;
}

Les quatre réglages de la propriété

Le raccourci transition permet d'écrire ces quatre valeurs en une seule ligne, dans cet ordre : propriété, durée, courbe, délai. Le délai est optionnel et peut être omis.

Animer plusieurs propriétés à la fois

Plusieurs propriétés peuvent être animées simultanément, avec des réglages différents pour chacune, en séparant les déclarations par une virgule. On peut aussi écrire transition: all, qui anime automatiquement toute propriété qui changerait, mais cette solution de facilité coûte plus cher en performance et anime parfois des propriétés qu'on n'avait pas prévu d'animer. Un exemple courant combine transform et box-shadow pour soulever une carte au survol. Notre formation HTML et CSS construit ce genre d'interaction de carte pas à pas, de la première transition jusqu'à la combinaison de plusieurs propriétés animées ensemble.

.carte {
  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out;
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

Le piège : deux états explicites, pas un état flou

transition ne sait animer que le passage entre deux valeurs connues et calculables. Elle échoue silencieusement, sans erreur ni avertissement, dès que l'une des deux valeurs est auto ou dépend d'un contenu de taille variable. Une hauteur qui passe de 0 à auto, par exemple, ne s'anime jamais en douceur : elle bascule instantanément, sans transition visible.

transition, animation et will-change

Contrairement à une Animation CSS, transition a toujours besoin d'un événement déclencheur, comme un survol ou un changement de classe : elle ne peut ni démarrer seule au chargement de la page, ni boucler indéfiniment. Le choix de la courbe d'accélération se règle grâce à une Easing et timing-function, et sur une animation fréquente ou coûteuse, will-change peut aider le navigateur à s'y préparer.

Questions fréquentes

Parce que transition a besoin d'un changement de valeur pour s'activer : si la propriété a directement sa valeur finale dès le premier rendu, il n'y a rien à animer. Pour obtenir un effet d'apparition au chargement, il faut définir un état initial en CSS, puis basculer vers l'état final avec un peu de JavaScript, souvent juste après le chargement du DOM.

Oui, c'est exactement le rôle du délai : l'événement qui déclenche la transition, comme un survol, se produit immédiatement, mais le mouvement visuel ne commence qu'après le délai indiqué, ce qui permet par exemple d'enchaîner plusieurs éléments avec un effet de cascade.

La transition repart depuis la position actuelle de l'animation, pas depuis le début : le navigateur inverse simplement la trajectoire à partir du point où elle se trouve, ce qui évite un saut brusque et donne un mouvement naturel dans les deux sens.