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

Popüler yayınlar

HTML Metin Biçimlendirme Etiketleri

HTML em Etiketi

CSS justify-content Özelliği

HTML table Etiketi

HTML hr Etiketi

CSS align-items özelliği

HTML menu Etiketi

CSS flex-basis Özelliği

HTML embed Etiketi

CSS content Özelliği