CSS animasyon yönü Özellik

Animasyonu önce ileriye, sonra geriye doğru oynatın:

div {
animation-direction: alternate;
}

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.

Tanım ve Kullanım

Özellik animation-direction, bir animasyonun ileri mi, geri mi yoksa alternatif döngülerde mi oynatılacağını tanımlar.

Varsayılan değer:	normal
Miras:	Hayır
canlandırılabilir:	Hayır. Canlandırılabilir hakkında bilgi edinin
Sürüm:	CSS3
JavaScript sözdizimi:	nesne .style.animationDirection="ters"

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.

Property
animation-direction	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Value	Description	Play it
normal	Default value. The animation is played as normal (forwards)
reverse	The animation is played in reverse direction (backwards)
alternate	The animation is played forwards first, then backwards
alternate-reverse	The animation is played backwards first, then forwards
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Animasyonu önce geriye, sonra ileriye oynatın:

div {
animation-direction: alternate-reverse;
}

Animasyonu geriye doğru oynatın:

div {
animation-direction: reverse;
}