CSS animasyon doldurma modu Özellik
Örnek
Animasyon sona erdiğinde <div> öğesinin son ana karedeki stil değerlerini korumasına izin verin:
div {
animation-fill-mode: forwards;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik animation-fill-mode
, animasyon oynatılmadığında (başlamadan önce, bittikten sonra veya her ikisi) öğe için bir stil belirtir.
CSS animasyonları, ilk animasyon karesi oynatılmadan önce veya son animasyon karesi oynatıldıktan sonra öğeyi etkilemez. Özellik animation-fill-mode
bu davranışı geçersiz kılabilir.
Varsayılan değer: | Yok |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.animationFillMode="ileri" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
CSS Sözdizimi
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
<div> öğesinin, animasyon başlamadan önce (animasyon gecikmesi süresi boyunca) ilk ana kare tarafından ayarlanan stil değerlerini almasına izin verin:
div {
animation-fill-mode: backwards;
}
Örnek
<div> öğesinin, animasyon başlamadan önce ilk ana kare tarafından ayarlanan stil değerlerini almasına ve animasyon sona erdiğinde son ana kareden stil değerlerini korumasına izin verin:
div {
animation-fill-mode: both;
}
İlgili Sayfalar
CSS eğitimi: CSS Animasyonları
HTML DOM referansı: animasyonFillMode özelliği