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>

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>

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.

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