Örnek
bir yerden bir yere hareket şey canlandırın ve orada kalmak var:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
Kendin dene " Tanımı ve Kullanımı
Animasyon oynarken değilken animasyon-doldur-mod özelliği elemanı için bir stil belirtir (when it is finished, or when it has a delay) .
Varsayılan olarak, CSS animasyonları ilk kare kadar eleman etkilemez "played" ve son ana kare tamamlandıktan sonra sonra durur. animasyon-doldur-mod özelliği bu davranışı geçersiz kılabilirsiniz.
Varsayılan değer: | none |
---|---|
Miras: | no |
canlandırılabilir: | no. Read about animatable |
Versiyon: | CSS3 |
JavaScript sözdizimi: | object .style.animationFillMode="forwards" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -moz-, -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
özellik | |||||
---|---|---|---|---|---|
animation-fill-mode | 4,0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4,0 -webkit- | 15.0 -webkit- 12.1 12.0-o- |
CSS sözdizimi
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Mülkiyet Değerler
değer | Açıklama |
---|---|
none | Varsayılan değer. animasyon başında veya sonunda hedef elemana 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") ya da bu ana kareye (when animation-direction 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 |
İlgili Sayfalar
CSS3 öğretici: CSS3 Animasyonlar
HTML DOM referansı: animationFillMode property