La propriété animation-duration définit la durée d'une animation pour parcourir un cycle.
animation-duration: 6s; animation-duration: 120ms; animation-duration: 1s, 15s; animation-duration: 10s, 30s, 230ms;
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.
| 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 |
Syntaxe
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.
Note : Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de
0s.Note : Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété
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. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Support simple | 3.0-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0)[1] |
(Oui)-webkit (Oui) |
10 | 12-o 12.10 |
4.0-webkit |
| Fonctionnalité | Android | Chrome | Firefox Mobile (Gecko) | Edge | IE Phone | Opera Mobile | Safari Mobile | Chrome pour Android |
|---|---|---|---|---|---|---|---|---|
| Support simple | 2.0-webkit | ? | 5.0 (5.0)-moz 16.0 (16.0) |
(Oui)-webkit (Oui) |
Pas de support | Pas de support | 4.2-webkit | 43.0 |
[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.