Propriété CSS transition-delay - Utilisation, syntaxe, exemples

La propriété CSS transition-delay définit le temps d'attente avant qu'un effet de transition ne commence, une fois que le changement déclencheur s'est produit. C'est l'une des quatre propriétés longhand qui composent la propriété shorthand transition, aux côtés de transition-property, transition-duration et transition-timing-function.

Cette page couvre les valeurs de la propriété, le comportement des délais positifs et négatifs, la façon de définir un délai distinct pour chaque propriété animée, ainsi que les utilisations les plus courantes dans de vraies interfaces. C'est l'une des propriétés CSS3.

Fonctionnement du délai

La valeur par défaut est 0s, ce qui signifie que l'effet de transition démarre immédiatement lorsque la valeur de la propriété change (par exemple, au survol :hover).

Un délai positif décale le démarrage. Avec transition-delay: 2s, rien de visible ne se passe pendant deux secondes ; c'est seulement ensuite que la propriété commence à s'animer de son ancienne valeur vers sa nouvelle valeur sur la durée définie par transition-duration.

Un délai négatif est autorisé et se comporte différemment : la transition démarre immédiatement, mais elle commence en cours de sa chronologie, comme si elle avait déjà été en cours d'exécution pendant ce laps de temps. Ainsi, transition-duration: 4s avec transition-delay: -2s saute directement au point médian et se termine dans les deux secondes restantes.

Le délai ne se répète pas — contrairement à une itération d'animation, une transition s'exécute une seule fois par changement, donc le délai ne s'applique qu'à l'exécution unique déclenchée par le changement.

Info

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

Valeur initiale	0s
S'applique à	Tous les éléments, pseudo-éléments ::before et ::after.
Héritage	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.transitionDelay = "3s";

Syntaxe

transition-delay: time | initial | inherit;

Exemple de base

Ce bloc s'agrandit lorsque vous le survolez. Le délai est 0s, donc la croissance commence immédiatement — changez-le en 1s dans l'éditeur pour ressentir la différence.

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

Essayez vous-même »

Exemple avec 2 secondes de délai

Ici, le bloc attend deux secondes complètes après le survol avant de commencer à s'agrandir. Notez que transition-property liste plusieurs propriétés sous forme de liste séparée par des virgules (width, height).

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

Essayez vous-même »

Un délai différent pour chaque propriété

Lorsque vous animez plusieurs propriétés, vous pouvez attribuer à chacune son propre délai en listant les valeurs dans le même ordre que dans transition-property. La liste des délais est associée à la liste des propriétés : ici width démarre immédiatement, tandis que background-color attend une seconde.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, background-color;
        transition-duration: 1s, 1s;
        transition-delay: 0s, 1s;
      }
      div:hover {
        width: 300px;
        background-color: #1c8470;
      }
    </style>
  </head>
  <body>
    <h2>Staggered transition-delay</h2>
    <p>Hover: the width grows first, then the color changes a second later.</p>
    <div></div>
  </body>
</html>

Cas d'usage courants

Décalage des animations pour que plusieurs éléments (ou plusieurs propriétés d'un même élément) se déplacent les uns après les autres plutôt que tous en même temps, créant un effet plus soigné.
Menus avec intention de survol. Un petit délai sur le repli d'un menu déroulant (souvent associé à un délai sur visibility) maintient le menu ouvert brièvement pour éviter qu'un mouvement de souris légèrement hors cible ne le ferme.
Délais négatifs pour démarrer un effet déjà « en cours », utile lorsque vous souhaitez qu'un élément arrive à un point spécifique de sa transition immédiatement.

Valeurs

Valeur	Description
time	Spécifie le nombre de secondes ou de millisecondes pendant lequel un effet de transition doit attendre avant de démarrer. La valeur par défaut est 0s.
initial	Fait utiliser à la propriété sa valeur par défaut.
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 fera démarrer l'effet de transition immédiatement.