animation-duration

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

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

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.

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 Level 1 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
Valeur calculée	comme spécifié
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser