CSS3 animation-Verwendung und Beispiel der name-Eigenschaft

der animation-Der Name der durch die nameCSS-Eigenschaft angegebenen @keyframes sollte auf den ausgewählten Element angewendet werden, um die Animation zu definieren.

Die folgende Tabelle gibt eine Zusammenfassung der Verwendungs- und Versionshistorie dieses Attributes an.

animation-name Syntax

Die Syntax dieses Attributes ist wie folgt：

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

Der folgende Beispiel zeigt, wie animation verwendet wird-name Eigenschaft.

.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%;}
}

Eigenschaftswert

Die folgende Tabelle beschreibt den Wert dieser Eigenschaft.

Browserkompatibilität

animation-Kompatibilität der name Eigenschaft der Browser, alle gängigen Browser unterstützen diese Eigenschaft.

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Anleitungen：CSS3Animation。

Verwandte Eigenschaften und Regeln：animation，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。