animation-delay CSS propriété

Définition de la CSS animation-delay.

La propriété d'Animation CSS animation-delay permet de spécifier la durée de latence (pause) avant de démarrer une animation CSS.

Exemple de syntaxe CSS animation-delay :

.mon-animation{
  animation-name : animation0;
  animation-delay : 6s;
}
.mon-animation{
  animation-name : animation1, animation2;
  animation-delay : 5s, 8s;
}

La propriété d'Animation CSS animation-delay accepte une/des valeurs de durée suivantes :

numérique positif suivi de s. La durée de la pause avant le démarrage de l'animation est en seconde. Unité de durée utilisée s'il n'y a pas d'unité spécifiée. La valeur par défaut est 0.
numérique positif suivi de ms. La durée de la pause avant le démarrage de l'animation est en milliseconde.

Découvrez la page dédiée pour comprendre le principe de base d'une animation en CSS3.

Exemple de code animation-delay CSS

Conditions d'application de la CSS animation-delay.

La valeur de la CSS animation-delay peut être mise directement dans la propriété de raccourci CSS animation.

Héritage des valeurs Css de animation-delay.

La durée de latence d'une animation CSS animation-delay n'est pas héritée.

Problème d'interprétation de animation-delay en Css.

La propriété d'Animation CSS animation-delay pose des problèmes d'interprétation, n'est pas reconnue par Internet Explorer < 10 et Firefox < 19 et Opera < 12.1.

Règles de syntaxes CSS pour animation-delay.

Règle d'écriture d'une durée de latence d'une animation CSS : animation-delay

La propriété d'Animation CSS animation-delay accepte une ou plusieurs valeurs de durée positives qui seront séparées par une virgule.
Le nombre de valeur est lié au nombre de nom d'animation déclaré dans la propriété d'Animation CSS animation-name.
Si vos durées sont identiques, vous pouvez mettre une seule valeur.

Exemple de syntaxe CSS animation-delay :

.mon-animation{
  animation-name : animation1, animation2;
  animation-delay : 5s, 8s;
}

Compatibilités navigateurs de la propriété animation-delay

Détails des versions de la CSS animation-delay: Propriété animation-delay est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS animation-delay: Propriété CSS animation-delay est compatible à partir de Chrome 43; Propriété CSS animation-delay est compatible à partir de Firefox 13.00; Propriété CSS animation-delay est compatible à partir de Internet Explorer 10; Propriété CSS animation-delay est compatible à partir de Opera 12.10; Propriété CSS animation-delay est incompatible pour Safari

Propriétés CSS préfixées de animation-delay

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété animation-delay CSS :

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation-delay.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation-delay.
Pour Opera 12+, vous pouvez utiliser : -o-animation-delay. Pour info, il semble les versions préfixées pour les animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété css -ms-animation-delay mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-animation-delay

Votre avis sur la définition animation-delay en CSS

Votez pour la définition CSS `animation-delay`

Votes: 5 / 5 - 6 votes
Cliquez sur une étoile pour voter.