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.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
Yorum Gönder