Propriété CSS transition-duration

La propriété CSS transition-duration spécifie le nombre de secondes ou de milisecondes que doit durer une animation.

On peut spécifier une ou plusieurs durations séprarées par virgules.

La valeur par défaut est 0s, ce qui signifie que la transition n'aura aucun effet.

Pour la compatibilité maximale des navigateurs, des extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les plus anciennes versions d'Opera, sont utilisées avec cette propriété.

Valeur initiale	0s
Appliquée à	Tous les éléments, les pseudo-éléments ::before and ::after.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.transitionDuration = "3s";

Syntaxe

transition-duration: time | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 150px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 2s;
      -moz-transition-duration: 2s;
      -o-transition-duration: 2s;
      transition-duration: 2s;
      }
      div:hover {
      width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-duration</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la propriété transition-duration:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-timing-function: linear, linear;
      -moz-transition-timing-function: linear, linear;
      -o-transition-timing-function: linear, linear;
      transition-timing-function: linear, linear;
      }
      .container:hover .example {
      left: 250px;
      background-color: #ccc;
      }
      .el1 {
      -webkit-transition-duration: .3s, .3s;
      -moz-transition-duration: .3s, .3s;
      -o-transition-duration: .3s, .3s;
      transition-duration: .3s, .3s;
      }
      .el2 {
      -webkit-transition-duration: .6s, .6s;
      -moz-transition-duration: .6s, .6s;
      -o-transition-duration: .6s, .6s;
      transition-duration: .6s, .6s;
      }
      .el3 {
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      }
      .el4 {
      -webkit-transition-duration: 2s, 2s;
      -moz-transition-duration: 2s, 2s;
      -o-transition-duration: 2s, 2s;
      transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-duration</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 requis pour qu'un effet de transition se termine. La valeur par défaut est 0s.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.