animation-duration

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

La propriété animation-duration définit la durée d'une animation pour parcourir un cycle.

Exemple interactif

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 animation afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.

Syntaxe

css
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 (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.

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.

Définition formelle

Valeur initiale0s
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Valeur calculéecomme spécifié
Type d'animationNot animatable

Syntaxe formelle

animation-duration = 
<time [0s,∞]>#

Exemples

CSS

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

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

Specification
CSS Animations Level 1
# animation-duration

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-duration
auto value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi