CSS3 animation-direction Özelliği

CSS3 animation-direction özelliği

Css animation-direction özelliği, animasyonun yönünün belirtilmesi için kullanılır.

Örnek:

Bu örnekte animasyon gerçekleştikten sonra geriye doğru kendini tekrarlayacaktır. Alternate değeri verildiğindeki etkisini görmek için aşağıdaki butona tıklayınız..

div { animation-direction: alternate; -webkit-animation-direction: alternate;/* Chrome, Safari ve Opera için */ }

CSS3 animation-direction nedir nasıl kullanılır

Bir animasyonun hangi yönde gerçekleşeceğini belirtmek için animation-direction özelliği kullanılır.

CSS animation-direction	CSS animation-direction özellikleri
Varsayılan Değer:	normal
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript animation-direction:	object.style.animationDirection="alternate-reverse"

CSS3 animation-direction Tarayıcı Desteği

CSS Kodu:
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-

CSS3 animation-direction Değerleri

animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit;

CSS3 animation-direction özelliği değerleri

Hatırlatma: alternate ve alternate-reverse değerleri Safari tarayıcısında desteklenmemektedir.

CSS animation-direction değerleri	CSS animation-direction değerleri tanımları	CSS Örnek Uygulamalar
normal	Varsayılan değerdir .Animasyon olağan şekilde gerçekleşecektir.
reverse	Reverse değeri uygulandığında animasyon sondan başa doğru gerçekleşecektir.
alternate	Alternate değerini uygulandığında ise animasyon normal şekilde gerçekleşecek fakat en son geriye doğru animasyonu tekrarlayacaktır.
alternate-reverse	Alternate değerinden farkı,animasyon başlarken son adımlardan ilk adımlara doğru bir yön izleyecektir.
initial	Varsayılan başlangıç değeridir.
inherit	Soy bağından alınan değeri taşır.