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>

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>

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.

Support de Navigateurs

26.0+
1.0 -webkit-
12.0+ 16.0+
4.0 -moz- 49.0 -webkit-
6.1+
3.0 -webkit-
12.1+
15.0 -webkit-


Trouvez-vous cela utile?

Articles Associées