CSS3 animation-Méthode d'utilisation et exemples de la propriété name

de l'animation-Le nom spécifié par la propriété nameCSS @keyframes doit être appliqué à l'élément sélectionné pour définir l'animation.

Le tableau suivant résume le contexte d'utilisation et l'historique des versions de cette propriété.

animation-Syntaxe d'utilisation de name

La syntaxe de cet attribut est la suivante :

animation-name:　keyframe-name　|　none　|　initial　|　inherit

L'exemple suivant montre comment utiliser animation-Attribut name.

.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 cet attribut.

Compatibilité du navigateur

animation-Compatibilité du navigateur pour l'attribut name, tous les navigateurs populaires prennent en charge cet attribut.

Lisez davantage

Veuillez consulter les tutoriels suivants :CSS3Animation。

Attributs et règles associés :animation，animation-duration，animation-timing-function，animation-delay，animation-itération-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。