title | slug |
---|---|
animation-duration |
Web/CSS/animation-duration |
{{CSSRef}}
La propriété animation-duration
définit la durée d'une animation pour parcourir un cycle.
{{EmbedInteractiveExample("pages/css/animation-duration.html")}}
La valeur par défaut est 0s
, ce qui indique qu'aucune animation ne doit avoir lieu.
Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.
animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;
<time>
- : La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (
s
comme suffixe pour l'unité) ou en millisecondes (ms
comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
- : La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (
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 {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.
{{CSSInfo}}
{{CSSSyntax}}
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%;
}
}
<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>
{{EmbedLiveSample("Exemples","300","200")}}
{{Specifications}}
{{Compat}}
- Manipuler les animations CSS
- {{domxref("AnimationEvent", "AnimationEvent")}}