Propriété CSS transition-delay

La propriété CSS transition-delay spécifie quand l'effet de transition doit commencer.

La valeur par défaut est 0s, ce qui signifie que l'effet de transition démarre immédiatement.

Le décalage temporel spécifié retarde le début de l'animation. Les valeurs négatives sont également autorisées. Un délai négatif fait que la transition démarre à mi-chemin de sa chronologie d'animation.

La valeur peut être un temps en secondes ou en millisecondes, ou une liste de valeurs temporelles séparées par des virgules. Lorsque plusieurs valeurs sont fournies, elles sont mappées aux propriétés correspondantes dans la liste transition-property. Cette propriété est également incluse dans le raccourci transition.

INFO

Les navigateurs modernes prennent en charge cette propriété nativement sans préfixes fournisseurs.

Valeur initiale	0s
S'applique à	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

css

transition-delay: time | initial | inherit;

Exemple de la propriété transition-delay :

Exemple de code CSS transition-delay

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété transition-delay avec un délai de 2 secondes :

Autre exemple de code CSS transition-delay

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <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 attendre avant de commencer. La valeur par défaut est 0s.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle affirmation est correcte concernant la propriété transition-delay ?

spécifie quand l'effet de transition doit se terminer.La valeur par défaut est 0s, ce qui signifie que l'effet de transition ne démarrera pas.Une valeur négative démarrera l'effet de transition immédiatement.

Propriété CSS transition-delay ​

Syntaxe ​

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

Exemple de la propriété transition-delay avec un délai de 2 secondes : ​