animation-duration CSS propriété

Définition de la CSS animation-duration.

La propriété d'Animation CSS animation-duration permet de spécifier la durée totale de l'animation à appliquer.

Exemple de syntaxe CSS animation-duration :

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

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

numérique positif suivi de s. La duré 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 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-duration CSS

Conditions d'application de la CSS animation-duration.

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

Héritage des valeurs Css de animation-duration.

La durée de l'animation CSS animation-duration n'est pas héritée.

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

La propriété d'Animation CSS animation-duration 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-duration.

Règle d'écriture de la durée d'une animation : animation-duration

La propriété d'Animation CSS animation-duration accepte une ou plusieurs valeurs de durée positive 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 d'écriture CSS de animation-duration :

div{
  animation-name : animation1, animation2;
  animation-duration : 5s, 8s;
}

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

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

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

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

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

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation-duration.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation-duration.
Pour Opera 12+, vous pouvez utiliser : -o-animation-duration. 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-duration 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-duration

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

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

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