animation-duration

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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 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 initiale0s
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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.

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) Internet Explorer Opera Safari (WebKit)
Support simple 3.0-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10
4.0-webkit
Fonctionnalité Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome pour Android
Support simple 2.0-webkit ? 5.0 (5.0)-moz
16.0 (16.0)
Pas de support Pas de support 4.2-webkit 43.0

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, Sebastianz, FredB
 Dernière mise à jour par : SphinxKnight,