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

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