La propriété animation-duration définit la durée d'une animation pour parcourir un cycle.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
La valeur par défaut est 0s, ce qui indique qu'aucune animation ne doit avoir lieu.
Généralement, on passera pas la propriété raccourcie animation afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.
Syntaxe
animation-duration: 6s; animation-duration: 120ms; animation-duration: 1s, 15s; animation-duration: 10s, 30s, 230ms;
Valeurs
<time>- La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (
scomme suffixe pour l'unité) ou en millisecondes (mscomme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
0s.animation-*, selon leur quantité, elles seront différemment affectées aux animations définies par animation-name. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.Syntaxe formelle
<time>#
Exemples
CSS
p {
animation-duration: 15s;
animation-name: glissement;
animation-iteration-count: infinite;
}
@keyframes glissement {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
HTML
<p> La Chenille et Alice se considérèrent un instant en silence. Enfin la Chenille sortit le houka de sa bouche, et lui adressa la parole d’une voix endormie et traînante. </p>
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Animations La définition de 'animation-duration' dans cette spécification. |
Version de travail | Définition initiale. |
| Valeur initiale | 0s |
|---|---|
| Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 43 3 -webkit- | 12 12 -webkit- | 16 49 -webkit- 5 -moz- | 10 | 30 15 -webkit- 12.1 — 15 12 — 15 -o- | 4 -webkit- |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Oui 2 -webkit- | 43 Oui -webkit- | Oui Oui -webkit- | 16 49 -webkit- 5 -moz- | 30 15 -webkit- 12.1 — 15 12 — 15 -o- | 4.2 -webkit- | 4.0 Oui -webkit- |
1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.