Style animationFillMode özelliği
- Önceki sayfa animationDuration
- Sonraki sayfa animationIterationCount
- Bir üst katmana dön HTML DOM Style Nesnesi
Tanım ve kullanım
animationFillMode
Özelliği, animasyon oynatılmadığında (animasyon bittiğinde veya "gecikme" olduğunda) elemente uygulanacak stili tanımlar.
Öntanımlı olarak, CSS animasyonları, ilk anahtar kareden "oynat" öncesi, animasyonu gerçekleştiren elemente etki etmez ve en son anahtar kareden sonra etki durur.animationFillMode
Özellik, bu davranışı geçebilir.
Örnek
<div> elementinin animationFillMode özelliğini değiştirin:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Gramer
animationFillMode özelliğini döndürün:
object.style.animationFillMode
animationFillMode özelliğini ayarlayın:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Özellik değeri
Değer | Tanım |
---|---|
none | Öntanımlı değer. Animasyon, çalışmadan önce veya sonra hedefe herhangi bir stil uygulamaz. |
forwards | Animasyon bittiğinde (animation-iteration-count tarafından belirlenir), animasyon, bu özelliğin bu değerini uygular. |
backwards |
animation-delay tanımlanan süre boyunca, animasyon, animasyonun ilk yinelemesini başlatan anahtar kareden tanımlanan özellik değerlerini uygular. Bu, anahtar karelerin değerlerinden (animasyon yönü "normal" veya "alternate" olduğunda) veya anahtar karelere olan değerlerden (animasyon yönü "reverse" veya "alternate-reverse" olduğunda) gelir. |
both | Animasyon ileri ve geri kurallarını izler. Yani, animasyon özelliklerini iki yönde genişletir. |
initial | Bu özelliği öntanımlı değerine ayarlar. İlgili bilgileri görüntüle initial。 |
inherit | Bu özelliği ebeveyn elemanından devralır. İlgili bilgileri görüntüle inherit。 |
Teknik ayrıntılar
Öntanımlı değer: | none |
---|---|
Dönüşüm değeri: | Dizgi, elemanın animation-fill-mode özelliği。 |
CSS sürümü: | CSS3 |
Tarayıcı desteği
animationFillMode
CSS3 (1999) özelliğidir。
Tüm tarayıcılar tamamen buyu destekler:
Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera | IE |
Destek | Destek | Destek | Destek | Destek | 11 |
İlgili sayfalar
CSS Kaynak Kılavuzu:animation-fill-mode özelliği
- Önceki sayfa animationDuration
- Sonraki sayfa animationIterationCount
- Bir üst katmana dön HTML DOM Style Nesnesi