CSS3 animation-fill-mode Özelliği

CSS3 animation-fill-mode

animation-fill-mode ile animasyonun bittiğinde veya istenilen zaman diliminde nasıl davranacağını belirlenir.

Örnek:

Bu örnekte ,animasyon bittiğinde tanımlandığı son karede sabit kalacaktır.

div { animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ }

CSS3 animation-fill-mode nedir nasıl kullanılır

Animasyonun bitiminde veya belirtilen zaman dilimindeki davranışını değiştirmek için kullanılır.
CSS animation-fill-mode CSS animation-fill-mode özellikleri  
Varsayılan Değer: none  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript animation-fill-mode: object.style.animationFillMode="forwards"

CSS3 animation-fill-mode Tarayıcı Desteği

CSS Kodu:
animation-fill-mode 4.0 -webkit- 10.0 16.0
5.0 -moz-
4.0 -webkit- 12.1
15.0 -webkit-
12.0 -o-

CSS animation-fill-mode Değerleri

animation-fill-mode:none|forwards|backwards|both|initial|inherit;

CSS3 animation-fill-mode özelliği değerleri

CSS animation-fill-mode değerleri CSS animation-fill-mode değerleri tanımları
none Varsayılan Başlangıç değeridir.Animasyon sona erdiğinde etki ettiği elemanın geri dönmesini sağlar ve kendi tanımlarını alır. Animasyonun süresi boyunca bir stil uygulanmaz.
forwards Animasyon bittiğinde son konumundaki özellik korunur.Yani son karesinde verilen özellik geçerli kalır başlangıç değerine yada konumuna geri dönmez
backwards Gecikme değeri uygulandığı zaman, animasyonun ilk karesindeki değeri alır.
both Forwards ve backwards ikisi birlikte uygulanır .Gecikme zamanında ilk kare özelliklerini alır, hemde son kare değerleri elemanda tanımlı kalır.
initial Varsayılan değerini taşır.
inherit Kalıtsal olarak aldığı taşıması için kullanılır.

Yorumlar

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

CSS top Özelliği

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

CSS flex-basis Özelliği

HTML5 Canvas Oyun Yapımı Dersleri