Örnek
A animationFillMode özelliğinin değiştirilmesi <div> elemanı:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Kendin dene " Tanımı ve Kullanımı
AnimationFillMode özelliği animasyon oynamadığı Stiller element için uygulayacağı işlemi belirler (when it is finished, or when it has a "delay") .
Varsayılan olarak, CSS animasyonları ilk kare dek haraketlendirilir elemanı etkilemez "played" ve ardından son ana kare tamamlandıktan sonra onu etkileyen durdurur. animationFillMode özelliği bu davranışı geçersiz kılabilirsiniz.
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Moz ardından Numaraları önek ile çalıştı ilk sürümü belirtin.
özellik | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | Desteklenmiyor | 16.0 5.0 Moz | Desteklenmiyor | 30.0 |
Sözdizimi
animationFillMode özelliğini Dönüş:
object .style.animationFillMode
animationFillMode özelliğini ayarlayın:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
Mülkiyet Değerler
değer | Açıklama |
---|---|
none | Varsayılan değer. animasyon başında veya sonunda hedefe herhangi stilleri geçerli olmayacaktır yürütülürken |
forwards | Animasyon sona erdikten sonra (determined by animation-iteration-count) , animasyon, animasyon sona defa özellik değerlerini uygulayacaktır |
backwards | animasyon animasyon-gecikme ile belirlenen süre boyunca, animasyonun ilk yineleme başlayacak ana karede tanımlanır özellik değerlerini geçerli olacaktır. Bu değerleri ya olan ana kare (when animation-direction is "normal" or "alternate") ana kareye veya kişilerce (when animationDirection is "reverse" or "alternate-reverse") |
both | animasyon ileriye ve geriye doğru her ikisi için kuralları izleyecektir. Yani, her iki yönde de animasyon özelliklerini uzatacak olan |
initial | varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun |
inherit | üst öğesinden bu özelliği devralır. Yaklaşık miras oku |
Teknik detaylar
Varsayılan değer: | Yok |
---|---|
Geri dönüş değeri: | bir elemanın animasyon-doldur-mod özelliği temsil eden bir String, |
CSS Sürüm | CSS3 |
İlgili Sayfalar
CSS referansı: animation-fill-mode property
<Stil Nesne