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

Bu blogdaki popüler yayınlar

HTML Resimler

HTML yorum etiketi ile öğe gizleme örneği

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML5 Canvas Oyun Yapımı Dersleri

YouTube Reklam Engelleyici

Uyurken Bile Para Kazanmak İster misin

javascript ile aciklama satiri ve haftanın gunünü bulma

Linklerin Renklerini Değiştirme Örnek