Attribut ANIMATION-DURATION

Rôle

L’attribut animation-duration permet de spécifier la durée d’une animation

L’attribut animation-duration doit être fourni, sinon l’animation ne se fera pas : 0 seconde par défaut

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.animationDuration

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

body{
  padding: 10px;
  background-color: rgb(230,230,230);
}
img{
  border-radius: 50%;
  width: 100px;
  position: relative;
  display: block;
  margin: 0 auto;
  border: thin solid orange;
  animation-name: cos;
  animation-duration: 1s;
  animation-timing-function:ease-in ;
  animation-direction: alternate ;
  animation-iteration-count: infinite;
}
@keyframes cos {
  0% {top: 0px}
  100% {top: 150px}
}

– Le code HTML

<img src="//lorempixel.com/output/animals-q-c-100-100-10.jpg" alt="">

Résultat

Dans cet exemple, l’animation (la chute) dure 1 seconde, ensuite elle est alternée (le rebond) avec l’attribut animation-direction et répétée à l’infini avec l’attribut iteration-count

Compatibilité

L’attribut animation-duration est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 10
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)

Valeurs

Les différentes valeurs de l’attribut animation-duration sont:

durée

La durée exprimée en seconde (ex: 5s) ou en milliseconde (ex:5000ms)
Syntaxe :
animation-duration : 5s

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
animation-duration : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
animation-duration : inherit

A voir aussi

animation– animation-delay– animation-direction– animation-timing-function