Propriété CSS transition-delay

La propriété CSS transition-delay spécifie le moment où l'effet de la transition doit commencer.

La valeur initiale est 0s, ce qui signifie que l'effet de la transition commence immédiatement.

Une valeur négative aussi va immédiatement débuter l'effet de transition.

La valeur peut être une valeur de temps valide définie en secondes ou en millisecondes ou une liste de valeurs temporelles séparées par des virgules définies pour un seul élément.

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 anciennes versions d'Opera sont utilisées avec cette prorpriété.

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

Syntaxe

transition-delay: time | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 150px;
      height: 150px;
      background: #8ebf42;
      -webkit-transition-property: width;
      -moz-transition-property: width;
      -o-transition-property: width;
      transition-property: width;
      -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
      -o-transition-duration: 1s;
      transition-duration: 1s;
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s;
      }
      div:hover {
      width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-delay</h2>
    <p>Placez la souris sur l'élément pour voir l'effet.</p>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Un exemple dans lequel transition-delay de la position attend 2 secondes à commencer:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 150px;
      height: 150px;
      background: #8ebf42;
      -webkit-transition-property: width height;
      -moz-transition-property: width height;
      -o-transition-property: width height;
      transition-property: width height;
      -webkit-transition-duration: 3s;
      -moz-transition-duration: 3s;
      -o-transition-duration: 3s;
      transition-duration: 3s;
      -webkit-transition-delay: 2s;
      -moz-transition-delay: 2s;
      -o-transition-delay: 2s;
      transition-delay: 2s;
      }
      div:hover {
      width: 300px;
      height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-delay</h2>
    <p>Placez la souris sur l'élément et attendez 2 secondes pour voir l'effet.</p>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
time	Spécifie le nombre de secondes ou de milisecondes qu'un effet de transition doit attendre à débuter. La valeur initiale est 0s.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.