OUJOOD.COM
Définition et utilisation da la propriété css animation-delay
La propriété animation-delay spécifie un délai pour le démarrage d'une animation.La valeur de la propriété css animation-delay est définie en secondes (s) ou en millisecondes (ms).
La Syntaxe CSS
animation-delay: time|initial|inherit;
| Valeurs par défaut | 0s |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.animationDelay="1s" |
Prise en charge de la propriété css dans navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 43 4 -wibkit- | 10 | 16 5 -moz- | 9 4 -webkit- | 30 15 -webkit- 12 -o- |
Exemple Démarrage de l'animation après 2 secondes 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: monAnimation 5s infinite;
animation-delay: 2s;
}
@keyframes monAnimation {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<h1>La propriété animation-delay</h1>
<p>L'animation va démrer après 2 seconds:</p>
<div></div>
</body>
</html>
Exemple Modifier le délai d'animation avec JavaScript 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
#monDIV {
width: 100px;
height: 100px;
background: green;
position: relative;
animation: monAnimation 5s infinite;
animation-delay: 15s;
}
@keyframes monAnimation {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<h1>modifier la propriété css animation-delay avec JavaScript</h1>
<p>Si vous laissez l'animation démarer sans cliquer sur le boutton "CHANGER". L'animation commencera 15 secondes après la fin du chargement de la page (le délai commence à compter à partir de la fin du chargement de la page, et non à partir du moment où vous cliquez sur le bouton).</p>
<p>Cliquez sur le bouton "CHANGER" pour réduire le délai de l'animation à 3 secondes, et l'animation commence 3 secondes à partir du moment où vous kliquez sur le boutton </p>
<button onclick="maFonction()">CHANGER</button>
<div id="monDIV"></div>
<script>
function maFonction() {
document.getElementById("monDIV").style.animationDelay = "3s";
}
</script>
</body>
</html>
Valeurs de la propriété
| Valeur | Description |
|---|---|
| time | Facultatif. Définit le nombre de secondes (s) ou de millisecondes (ms) à attendre avant que l'animation ne démarre. La valeur par défaut est 0. Les valeurs négatives sont autorisées. Si vous utilisez des valeurs négatives, l'animation démarrera comme si elle avait déjà été jouée pendant N secondes/millisecondes. |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite cette propriété de son élément parent. |