Style animationFillMode özelliği

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";

Kişisel olarak deneyin

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