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
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 ?
Correcte!
Incorrecte!