Docs CSS exécutables : Transition CSS

Q: Dans quel ordre sont les valeurs du raccourci transition ?

transition: property duration timing-function delay;, par exemple transition: opacity 0.3s ease-in 0.1s;. La seule règle stricte est que la première durée est la durée de l'animation et la seconde le délai. Séparez plusieurs transitions par des virgules.

Q: Pourquoi ma transition CSS ne fonctionne-t-elle pas ?

Causes fréquentes : la transition n'est que dans la règle :hover (l'animation se fait à l'aller et revient d'un coup), la propriété ne peut pas être animée (display, ou height vers auto), la durée n'a pas d'unité (0.3 au lieu de 0.3s), ou la valeur change au moment même où l'élément est ajouté à la page.

Q: Peut-on animer height: auto avec une transition ?

Pas avec une simple transition de height dans tous les navigateurs : interpoler vers auto demande la propriété plus récente interpolate-size, qui n'est pas encore prise en charge partout. Les solutions courantes sont d'animer grid-template-rows de 0fr à 1fr sur un conteneur grid, ou d'animer max-height vers une valeur plus grande que le contenu.

Une transition en un exemple

Une transition dit au navigateur : quand cette propriété change, anime-la pendant ce temps au lieu de basculer d'un coup. Placez-la sur la règle normale de l'élément, pas seulement sur :hover :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

Survolez le premier bouton : sa couleur passe progressivement au vert et il monte de 4px en 0,4 seconde, et quand le pointeur s'en va, la même transition se joue en sens inverse. Le second bouton a transition: none et change instantanément. Les utilisateurs du clavier obtiennent le même effet via :focus-visible.

Le raccourci transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Propriété détaillée	Ce qu'elle définit	Par défaut
`transition-property`	quelles propriétés sont animées (`all`, ou une liste)	`all`
`transition-duration`	combien de temps, en `s` ou `ms`	`0s`
`transition-timing-function`	la courbe de vitesse	`ease`
`transition-delay`	l'attente avant le départ (peut être négative)	`0s`

La durée par défaut est 0s, c'est pourquoi rien n'est animé tant que vous n'en définissez pas une. Dans le raccourci, la première durée est toujours la durée de l'animation et la seconde le délai. Pour des réglages différents selon la propriété, séparez-les par des virgules :

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Les fonctions de temporisation côte à côte

La fonction de temporisation décide comment la vitesse évolue pendant la transition. Appuyez sur Play : les sept barres parcourent la même distance dans les mêmes 1,5 seconde :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Fonction de temporisation	Ressenti
`linear`	vitesse constante, mécanique
`ease` (par défaut)	départ rapide, arrêt en douceur
`ease-in`	départ lent, fin rapide : bien pour ce qui s'en va
`ease-out`	départ rapide, fin lente : bien pour ce qui arrive
`ease-in-out`	lent aux deux extrémités
`cubic-bezier(x1, y1, x2, y2)`	votre propre courbe ; un y supérieur à 1 dépasse la cible puis revient
`steps(n)`	avance par n sauts égaux, sans images intermédiaires

Pour les effets de survol et les menus, ease-out avec une durée entre 150ms et 300ms donne une sensation de réactivité.

Ce qui peut être animé

Les propriétés qui ont des valeurs intermédiaires peuvent être animées : couleurs, longueurs (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Les propriétés qui sautent d'un mot-clé à l'autre, comme display ou font-family, changent d'un coup.

height: auto est le cas le plus fréquent : un panneau qui s'ouvre de height: 0 à height: auto n'est pas animé par défaut, car le navigateur ne calcule pas les valeurs entre 0 et « auto ». Une solution fiable est un conteneur grid dont l'unique ligne passe de 0fr à 1fr :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded indique aux utilisateurs de lecteurs d'écran si le panneau est ouvert, ce que l'animation seule ne dit pas.

Exécuter du code à la fin d'une transition

L'événement transitionend se déclenche à la fin d'une transition, une fois par propriété. Utilisez-le pour agir après le mouvement, par exemple déplacer le focus ou retirer un élément :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Respecter la réduction des animations

Certaines personnes activent « réduire les animations » dans les réglages de leur système, car le mouvement à l'écran leur donne le vertige ou les distrait. Gardez les fondus de couleur et d'opacité, et supprimez les grands mouvements, avec une media query :

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Des transitions fluides

transform et opacity sont les propriétés les moins coûteuses à animer : le navigateur peut déplacer et estomper un élément sans recalculer la mise en page. Animer width, height, top ou margin oblige le navigateur à recalculer la mise en page à chaque image, ce qui peut saccader sur les téléphones lents. Pour déplacer un élément, préférez transform: translate() à left ou margin. La page transform présente les fonctions.

Erreurs courantes

transition uniquement dans la règle :hover. L'effet est animé à l'aller mais revient d'un coup à la fin du survol. Placez transition sur la règle de base.
Une durée sans unité. transition: opacity 300 est invalide. Écrivez 300ms ou 0.3s.
transition: all. Cela anime toutes les propriétés qui changent, y compris celles que vous ne vouliez pas animer, et peut ralentir les changements de mise en page. Listez les propriétés.
Attendre de display: none un fondu. display change d'un coup. Estompez plutôt opacity (et passez à visibility: hidden à la fin du fondu).
Une transition vers height: auto. Elle saute. Utilisez la technique grid-template-rows ci-dessus.
Des durées longues sur de petites interactions. Au-delà d'environ 400ms sur un bouton ou un menu, l'effet paraît lent.

Questions fréquentes

Comment fonctionnent les transitions CSS ?

Vous déclarez sur un élément quelles propriétés doivent être animées et pendant combien de temps, par exemple transition: background-color 0.3s ease;. Quand la valeur de cette propriété change (via :hover, une classe ou JavaScript), le navigateur anime le passage de l'ancienne valeur à la nouvelle au lieu de basculer d'un coup.

Dans quel ordre sont les valeurs du raccourci transition ?

transition: property duration timing-function delay;, par exemple transition: opacity 0.3s ease-in 0.1s;. La seule règle stricte est que la première durée est la durée de l'animation et la seconde le délai. Séparez plusieurs transitions par des virgules.

Pourquoi ma transition CSS ne fonctionne-t-elle pas ?

Causes fréquentes : la transition n'est que dans la règle :hover (l'animation se fait à l'aller et revient d'un coup), la propriété ne peut pas être animée (display, ou height vers auto), la durée n'a pas d'unité (0.3 au lieu de 0.3s), ou la valeur change au moment même où l'élément est ajouté à la page.

Peut-on animer height: auto avec une transition ?

Pas avec une simple transition de height dans tous les navigateurs : interpoler vers auto demande la propriété plus récente interpolate-size, qui n'est pas encore prise en charge partout. Les solutions courantes sont d'animer grid-template-rows de 0fr à 1fr sur un conteneur grid, ou d'animer max-height vers une valeur plus grande que le contenu.

Quelle est la différence entre transition et animation en CSS ?

Une transition s'exécute une fois, entre deux valeurs, quand une propriété change. Une animation utilise @keyframes, peut avoir de nombreuses étapes, démarre seule au chargement de la page et peut se répéter ou tourner en boucle.

Concepts liés