CSS animation-fill-mode 屬性
更多“自己嘗試”的例子見下文。
定義和用法
animation-fill-mode 屬性規定了元素在動畫未播放時（動畫開始前、結束後，或兩者兼有）的樣式。
CSS 動畫在播放第一個關鍵幀之前或最後一個關鍵幀之後不影響元素。 animation-fill-mode 屬性可以覆蓋此行為。
| 預設值 | none |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.animationFillMode="forwards" 立即嘗試 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 43 | 10 | 16 | 9 | 30 |
CSS 語法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| none | 預設值。動畫在執行之前或之後不會對元素應用任何樣式 |
| forwards | 元素將保留最後一幀設定的樣式值（取決於 animation-direction 和 animation-iteration-count） |
| backwards | 元素將獲取第一幀設定的樣式值（取決於 animation-direction），並在 animation-delay 期間保持此樣式 |
| both | 動畫將遵循 forwards 和 backwards 的規則，在兩個方向上擴充套件動畫屬性 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
在動畫開始前（在 animation-delay 期間），讓 <div> 元素獲取第一幀設定的樣式值
div {
animation-fill-mode: backwards;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 動畫
HTML DOM 參考：animationFillMode 屬性
