CSS3 animation-Méthode d'utilisation et exemple de l'attribut duration

CSS3 animation-L'attribut duration spécifie le nombre de secondes (s) ou de millisecondes (ms) que doit durer une animation pour achever un cycle.

Le tableau suivant résume l'utilisation et l'historique des versions de cet attribut.

animation-Syntaxe d'utilisation de duration

La syntaxe de cette propriété est la suivante :

animation-duration:　time　|　initial　|　inherit

L'exemple suivant montre comment utiliser animation-propriété duration.

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Compatibilité du navigateur

animation-Compatibilité du navigateur pour la propriété duration, tous les navigateurs populaires supportent cette propriété.

Pour en savoir plus

Veuillez consulter les tutoriels suivants :CSS3Animation。

Propriétés et règles associées :animation，animation-name，animation-duration，animation-timing-function，animation-iteration-count，animation-duration，animation-fill-mode，animation-play-state，@keyframes。