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