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.

Yorumlar

Bu blogdaki popüler yayınlar

HTML progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS border-collapse Özelliği

CSS overflow Özelliği

CSS justify-content Özelliği

HTML5 Canvas Oyun Yapımı Dersleri