w3docs logo

Propriété CSS animation-delay

La propriété CSS animation-delay est utilisée pour définir un délai de jouer l’animation. L'animation peut commencer plus tard, immédiatement du début, ou immédiatement et partiellement de l'animation.

La valeur initiale est 0. Les valeurs négatives sont permises. Si la valeur définie est négative, le délai commence l’animation à partir de l’heure spécifiée (c’est-à-dire que si -3 est indiqué, l’animation sera lue sans délai et à partir de ce moment, elle semble durer 3 secondes).

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.animationDelay = "1s";

Syntaxe

animation-delay: time | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 120px;
      height: 120px;
      background: #1c87c9;
      position: relative;
      animation: delay 5s infinite;
      animation-delay: 3s;
      }
      @keyframes  delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-delay</h2>
    <p>Ici, l'animation commence dans 3 secondes.</p>
    <div></div>
  </body>
</html>

Voici un exemple, où la propriété animation-delay a une valeur négative.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #ccc;
      position: relative;
      animation: delay 5s 1;
      animation-delay: -2s;
      }
      @keyframes delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-delay avec une valeur négative.</h2>
    <p>Ici, l'animation commencera jouer comme si elle jouait pour 2 secondes .</p>
    <div></div>
  </body>
</html>

Voyons un exemple avec millisecondes.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 120px;
      height: 120px;
      background: #8ebf42;
      position: relative;
      animation: delay 5s 1;
      animation-delay: 200ms;
      }
      @keyframes delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-delay en milisecondes.</h2>
    <p>Ici, l'animation commencera après 200ms.</p>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
time Définit les secondes (s) ou les millisecondes (ms) avant l’animation est jouée. C'est une valer facultative.
initial Définit toutes les propriétés de l’élément ou de l’élément parent à leurs valeurs initiales.
inherit Définit, que toutes les propriétés de l’éléments sont héritées de l’élément parent.

Support de Navigateurs

chrome firefox safari opera
43.0+
4.0-42.0 -webkit- 		16.0+
5.0-15.0 -moz- 		9.0+
5.1-8.0 -webkit- 		12.0+
15.0-29.0 -webkit-

Pratiquez vos connaissances

Qu'est-ce que la propriété 'animation-delay' en CSS ?
Trouvez-vous cela utile?