例
動畫的東西從一個地方移動到另一個並讓它呆在那裡：
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} 試一試» 定義和用法
動畫填充模式屬性指定當動畫不玩元素設置樣式(when it is finished, or when it has a delay) 。
默認情況下，CSS動畫不影響元素，直到第一個關鍵幀"played" ，然後一旦最後一個關鍵幀已完成停止。 動畫填充模式的屬性可以覆蓋這個行為。
| 默認值： | none |
|---|---|
| 遺傳： | no |
| 動畫： | no. Read about animatable |
| 版： | CSS3 |
| JavaScript語法： | object .style.animationFillMode="forwards" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-，-moz-，或-O-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| 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語法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;屬性值
| 值 | 描述 |
|---|---|
| none | 默認值。 動畫將無法之前或之後的任何樣式應用到目標元素正在執行 |
| forwards | 動畫結束後(determined by animation-iteration-count) ，動畫將應用屬性值的動畫結束時 |
| backwards | 動畫將適用於將啟動動畫的第一次迭代，在用動畫延遲所限定的時間的關鍵幀中定義的屬性值。 這些都是要么值從關鍵幀(when animation-direction is "normal" or "alternate")或者那些的設置關鍵幀(when animation-direction is "reverse" or "alternate-reverse") |
| both | 動畫將遵循向前和向後的規則。 即，將在兩個方向延伸的動畫屬性 |
| initial | 將此屬性設置為默認值。 閱讀關於初始 |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
相關頁面
CSS3教程： CSS3動畫
HTML DOM參考： animationFillMode property