Propriété CSS transition

La propriété CSS transition vous permet d'animer le changement de la valeur d'une propriété dans le temps, au lieu de l'appliquer instantanément. Lorsque la valeur d'une propriété animable change — par exemple parce que l'utilisateur survole un élément ou qu'une classe est basculée avec JavaScript — transition demande au navigateur d'interpoler progressivement depuis l'ancienne valeur vers la nouvelle, vous offrant des effets de fondu, de glissement, d'agrandissement et de changement de couleur sans boucle d'animation JavaScript.

transition est une propriété raccourcie qui définit quatre propriétés longues à la fois :

transition-property — quelle propriété animer (par ex. width, opacity, all).
transition-duration — combien de temps dure la transition (par ex. 2s, 300ms).
transition-timing-function — la courbe de rythme (par ex. ease, linear, cubic-bezier(...)).
transition-delay — combien de temps attendre avant de commencer.

La propriété transition fait partie des propriétés CSS3.

Comment lire la propriété raccourcie

Une transition unique s'écrit ainsi :

transition: <property> <duration> <timing-function> <delay>;

Seules transition-property et transition-duration sont réellement indispensables pour obtenir un effet visible ; la fonction de temporisation est par défaut ease et le délai 0s.

/* animate width over 2 seconds, default easing, no delay */
transition: width 2s;

/* full form: animate transform over 300ms with a custom curve, after a 100ms wait */
transition: transform 300ms ease-in-out 100ms;

La première valeur de temps lue par l'analyseur est toujours la durée ; la seconde est le délai. Ainsi, transition: opacity 1s 2s signifie durée 1s, délai 2s — et non l'inverse.

Avertissement

Si vous omettez la durée, elle est par défaut 0s, et une transition de 0s est instantanée — l'effet ne s'anime tout simplement pas. Pensez toujours à spécifier une durée.

Animer plusieurs propriétés

Pour effectuer la transition sur plusieurs propriétés, séparez chaque ensemble par une virgule. Chaque propriété peut avoir sa propre durée, sa propre fonction de temporisation et son propre délai :

.box {
  transition: left 1s ease-in-out,
              background-color 1s ease-out 1s;
}

Vous pouvez également utiliser le mot-clé all pour effectuer la transition sur toutes les propriétés animables qui changent, bien qu'énumérer les propriétés explicitement soit généralement plus économique et plus prévisible.

transition: all 0.3s ease;

Info

La valeur none est valide et désactive les transitions pour les propriétés spécifiées.

Déclencher une transition

Une transition ne fait rien par elle-même — elle ne s'exécute que lorsqu'une propriété animable change entre deux états. Les déclencheurs courants sont :

Des pseudo-classes telles que :hover, :focus ou :active.
Basculer une classe avec JavaScript (element.classList.toggle('open')).
Des modifications de style en ligne via un script (element.style.opacity = 0).

Définissez la transition sur l'état de base (au repos) de l'élément, et non sur la règle :hover. Ainsi, l'animation se joue aussi bien quand l'état s'active que quand il se désactive.

Info

Les préfixes vendeurs tels que -webkit-, -moz- et -o- sont hérités et généralement non requis pour les navigateurs modernes.

Valeur initiale	all 0s ease 0s
S'applique à	Tous les éléments, ainsi qu'aux pseudo-éléments ::before et ::after.
Hérité	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	Object.style.transition = "all 3s";

Syntaxe

Syntaxe de la propriété CSS transition

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Exemple de la propriété transition avec la pseudo-classe :active :

Exemple de la propriété CSS transition

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété transition avec la pseudo-classe :hover :

Exemple de la propriété CSS transition avec la pseudo-classe :hover

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Bon à savoir

Seules les propriétés animables se transitionnent. Les propriétés numériques et de couleur (width, opacity, color, transform) s'animent ; des propriétés comme display ou font-family changent instantanément.
Évitez les valeurs auto. Une transition entre une valeur fixe et height: auto ne s'animera pas, car le navigateur ne peut pas calculer les tailles intermédiaires. Utilisez plutôt max-height ou transform: scaleY().
Performances. transform et opacity sont les propriétés les moins coûteuses à animer car elles ne déclenchent ni mise en page ni peinture. Préférez-les à l'animation de left/top ou width/height lorsque c'est possible.
Transitions vs animations. Utilisez transition pour des changements d'état simples de A à B ; recourez à animation avec @keyframes lorsque vous avez besoin de boucles, de plusieurs étapes ou d'un mouvement qui démarre de lui-même.

Valeurs

Valeur	Description
transition-property	Spécifie les noms des propriétés concernées par la transition.
transition-duration	Spécifie la durée de l'animation de transition.
transition-timing-function	Spécifie la vitesse dans le temps d'un objet transitant d'une valeur à une autre.
transition-delay	Spécifie le temps d'attente avant qu'un effet de transition soit animé.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Exercice

Pratique

Quelles propriétés de la transition CSS peuvent être modifiées ?

La durée de la transitionLa fonction de temporisation de la transitionLe délai avant le démarrage de la transitionLa couleur de la transitionL'opacité de la transition