Propriété transition-duration de CSS

La propriété transition-duration définit la durée de l'animation de transition.

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

Une ou plusieurs durées séparées par des virgules peuvent être spécifiées. Chaque durée sera appliquée à la propriété correspondante définie par la propriété CSS transition-property. La liste transition-property agit comme liste principale ; s'il y a moins de durées que de propriétés, la liste des durées est répétée. S'il y a plus de durées spécifiées, la liste est tronquée.

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

INFO

Les préfixes fournisseurs (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, ::before et ::after pseudo-éléments.
Hérité	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.transitionDuration = "3s";

Syntaxe

Valeurs CSS pour transition-duration

css

transition-duration: time | initial | inherit;

Exemple de la propriété transition-duration :

Exemple de code CSS pour transition-duration

html

<!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>

Try it Yourself »

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

Autre exemple de code CSS pour transition-duration

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description
time	Spécifie le nombre de secondes ou de millisecondes qu'un effet de transition doit prendre. 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.

Pratique

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

Sa valeur par défaut est 0s.Une seule durée peut être spécifiée.Elle peut être appliquée aux pseudo-éléments ::before et ::after.

Propriété transition-duration de CSS ​

Syntaxe ​

Exemple de la propriété transition-duration : ​

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