CSS-Referenzhandbuch

CSS @Regeln (RULES)

Vollständiges Verzeichnis der CSS-Eigenschaften

CSS3 Animation-duration Eigenschaft CSS3 Animation-delay Eigenschaft

CSS3 Animation-direction 属性使用方法及示例

CSS animation-direction属性指定动画是否应在交替的循环中反向播放。

下表总结了此属性的用法上下文和版本历史记录。

默认值：	normal
适用于：	所有元素::before和::after 伪元素
继承：	没有
可动画制作：	否。请参见动画属性。
版本：	CSS3的新功能
JavaScript 语法：	object.style.animationDirection="reverse"

Animation-direction的使用语法

该属性的语法如下：

Animation-direction: normal | reverse | alternate | alternate-reverse　|　initial　|　inherit

Der folgende Beispiel zeigt, wie man animation-direction Eigenschaft.

Beispiel

.box　{
　　　　Breite:　50px;
　　　　Höhe:　50px;
　　　　Hintergrund:　rot;
　　　　Position:　relativ;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-Animation-Name:　moveit;
　　　　-webkit-Animation-Dauer:　4s;
　　　　-webkit-Animation-Iteration-Zähler:　2;
　　　　-webkit-Animation-Richtung:　alternate;
　　　　
　　　　Animation-Name:　moveit;
　　　　Animation-Dauer:　4s;
　　　　Animation-Iteration-Zähler:　2;
　　　　Animation-Richtung:　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Testen Sie es heraus‹/›

Hinweis：Wenn die Animation auf einmaliges Abspielen eingestellt wird, dann animation-direction Diese Eigenschaft ist ungültig, sieheAnimation-Iteration-ZählerEigenschaft.

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
normal	Die Animation sollte in jedem Zyklus abgespielt werden. Dies ist der Standardwert.
reverse	Die Animation sollte in jedem Zyklus rückwärts abgespielt werden.
alternate	Die Animation wird im ersten Zyklus vorwärts abgespielt, dann wird sie rückwärts abgespielt und dann wird sie weiter wechselnd abgespielt.
alternate-reverse	Die Animation wird im ersten Zyklus rückwärts abgespielt, dann wird sie vorwärts abgespielt und dann wird sie weiter wechselnd abgespielt.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, wird der Wert der animation Eigenschaft des Elternelements des verknüpften Elements verwendet.-direction。

Browserkompatibilität

Animation-Die Kompatibilität der direction Eigenschaft der Browser, alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox 5+ ^-moz-，15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-，15+ ^-webkit-

Weitere Lektüre

Bitte beziehen Sie sich auf die folgenden Anleitungen：CSS3Animation。

CSS3 Animation-duration Eigenschaft CSS3 Animation-delay Eigenschaft