樣式 animationFillMode 屬性
示例
改變 <div> 元素的 animationFillMode 屬性
document.getElementById("myDIV").style.animationFillMode = "forwards";自己動手試一試 »
描述
animationFillMode 屬性指定了當動畫未播放時（動畫結束或有“延遲”時）元素將應用的樣式。
預設情況下，CSS 動畫在第一個關鍵幀“播放”之前不會影響你正在動畫的元素，並且在最後一個關鍵幀完成後會停止影響它。animationFillMode 屬性可以覆蓋此行為。
語法
返回 animationFillMode 屬性
object.style.animationFillMode
設定 animationFillMode 屬性
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
屬性值
| 值 | 描述 |
|---|---|
| none | 預設值。動畫在執行之前或之後不會對目標應用任何樣式 |
| forwards | 動畫結束後（由 animation-iteration-count 決定），動畫將應用動畫結束時的屬性值 |
| backwards | 動畫將在 animation-delay 定義的期間內，應用將在動畫的第一次迭代中開始的關鍵幀中定義的屬性值。這些值要麼是 from 關鍵幀的值（當 animation-direction 為“normal”或“alternate”時），要麼是 to 關鍵幀的值（當 animationDirection 為“reverse”或“alternate-reverse”時） |
| both | 動畫將遵循 forwards 和 backwards 的規則。也就是說，它將在兩個方向上擴充套件動畫屬性 |
| initial | 將此屬性設定為其預設值。閱讀關於 initial |
| inherit | 從其父元素繼承此屬性。閱讀關於 inherit |
技術詳情
| 預設值 | none |
|---|---|
| 返回值 | 一個字串，表示元素的 animation-fill-mode 屬性 |
| CSS 版本 | CSS3 |
瀏覽器支援
animationFillMode 是 CSS3 (1999) 的特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
相關頁面
CSS 參考：animation-fill-mode 屬性
