CSS3 animation-Verwendung und Beispiel der duration-Eigenschaft

CSS3 animation-Die duration-Eigenschaft spezifiziert die Sekunden (s) oder Millisekunden (ms), die ein Animation für einen Zyklus dauern soll.

Die folgende Tabelle zusammenfasst die Verwendungskontexte und Versionshistorie dieser Eigenschaft.

animation-Syntax der Verwendung von duration

Die Syntax dieses Attributes ist wie folgt:

animation-duration:　time　|　initial　|　inherit

Der folgende Beispiel zeigt, wie man animation-duration 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 die Werte dieser Eigenschaft.

Browserkompatibilität

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

Weiterführende Lektüre

Bitte beziehen Sie sich auf die folgenden Tutorials:CSS3Animation.

Verwandte Eigenschaften und Regeln:animation,animation-name,animation-duration,animation-timing-function,animation-iteration-count,animation-duration,animation-fill-mode,animation-play-state,@keyframes.