oujood.com

Comment utiliser la propriété animation-delay en CSS ?

Dans cet article, nous allons voir comment utiliser la propriété animation-delay en CSS. La propriété animation-delay est utilisée pour définir les animations sur les pages Web.
La propriété animation-delay nous renseigne sur le délai de démarrage d'une animation.

chercher |

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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
4 -wibkit-
1016
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
timeFacultatif. 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.
initialDéfinit cette propriété à sa valeur par défaut.
inheritHérite cette propriété de son élément parent.

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web