Propriété CSS transition-duration

La propriété CSS transition-duration définit la durée d'une animation de transition, du début à la fin. C'est l'une des propriétés CSS3 et un composant longhand du raccourci transition.

Ce chapitre explique comment écrire des durées valides, en quoi une durée unique diffère d'une liste séparée par des virgules, les pièges à éviter (valeurs nulles, unités manquantes, longueurs de liste incompatibles) et comment cette propriété s'articule avec le reste de la famille transition — transition-property, transition-timing-function et transition-delay.

Comment écrire une durée

Une durée est une valeur <time> unique, exprimée en secondes (s) ou en millisecondes (ms) :

transition-duration: 0.5s;   /* half a second */
transition-duration: 500ms;  /* the same thing */

Quelques règles importantes à retenir :

L'unité est obligatoire. Un nombre seul tel que transition-duration: 2 est invalide et la déclaration entière est ignorée. Écrivez toujours 2s ou 2000ms.
Les valeurs négatives sont invalides. Contrairement à transition-delay, une durée ne peut pas être négative ; le navigateur traite une durée négative comme 0s.
0s signifie aucune transition visible. C'est la valeur par défaut, donc le changement de propriété se produit instantanément. Vous devez définir une durée non nulle pour que l'animation soit visible.

Durées multiples

Une ou plusieurs durées séparées par des virgules peuvent être spécifiées. Chaque durée est appliquée à la propriété correspondante listée dans transition-property, qui sert de liste principale :

transition-property: width, background-color;
transition-duration: 2s, 0.5s; /* width animates over 2s, background over 0.5s */

S'il y a moins de durées que de propriétés, la liste des durées est répétée jusqu'à couvrir toute la liste. S'il y a plus de durées que de propriétés, les durées supplémentaires sont ignorées :

/* 3 properties, 1 duration → every property uses 1s */
transition-property: width, height, color;
transition-duration: 1s;

Info

Les préfixes vendeur (tels que -webkit-, -moz-, -o-) ne sont plus nécessaires pour les navigateurs modernes, car transition-duration est entièrement pris en charge dans toutes les versions actuelles.

Valeur initiale	0s
S'applique à	Tous les éléments, les pseudo-éléments ::before et ::after.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.transitionDuration = "3s";

Syntaxe

Valeurs CSS de transition-duration

transition-duration: time | initial | inherit;

Exemple de la propriété transition-duration :

Exemple de code CSS transition-duration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        transition-duration: 2s;
      }
      div:hover {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Survolez le cadre gris : puisque transition-duration est défini à 2s, la largeur s'agrandit progressivement sur deux secondes au lieu de changer instantanément.

Exemple de la propriété transition-duration avec la valeur "time" :

Autre exemple de code CSS transition-duration

<!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;
      }
      .example {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-duration: .3s, .3s;
      }
      .el2 {
        transition-duration: .6s, .6s;
      }
      .el3 {
        transition-duration: 1s, 1s;
      }
      .el4 {
        transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div class="container">
      <p>
        <code>transition-duration: .3s, .3s;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-duration: .6s, .6s;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-duration: 1s, 1s;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-duration: 2s, 2s;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
time	Spécifie le nombre de secondes ou de millisecondes nécessaires à l'accomplissement d'un effet de transition. La valeur par défaut est 0s.
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent.

Propriétés associées

transition-duration est rarement utilisé seul. En pratique, vous le combinez avec les autres propriétés longhand de transition, généralement via le raccourci transition :

transition-property — les propriétés CSS qui s'animent.
transition-timing-function — la courbe d'accélération (ease, linear, cubic-bezier).
transition-delay — le délai avant le démarrage de la transition.

Pour les mouvements en plusieurs étapes qui ne peuvent pas être exprimés comme un changement A vers B unique, utilisez plutôt les animations CSS.

Exercice

Pratique

Quelle affirmation est incorrecte concernant la propriété transition-duration ?

Sa valeur par défaut est 0s.On ne peut spécifier qu'une seule durée.Elle peut s'appliquer aux pseudo-éléments ::before et ::after.