Style animationFillMode 屬性

定義和用法

animationFillMode 屬性規定動畫不播放時（動畫結束時，或有“延遲”時）將應用于元素的樣式。

默認情況下，CSS 動畫在“播放”第一個關鍵幀之前不會影響正在進行動畫的元素，然后在最后一個關鍵幀完成后停止影響它。animationFillMode 屬性可以覆蓋此行為。

實例

更改 <div> 元素的 animationFillMode 屬性：

document.getElementById("myDIV").style.animationFillMode = "forwards";

親自試一試

語法

返回 animationFillMode 屬性：

object.style.animationFillMode

設置 animationFillMode 屬性：

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

屬性值

值 描述
none 默認值。動畫在執行之前或之后不會將任何樣式應用于目標。
forwards 動畫結束后（由 animation-iteration-count 決定），動畫將在動畫結束時應用此屬性值。
backwards

在 animation-delay 定義的時間段內，動畫將應用關鍵幀中定義的屬性值，該關鍵幀將開始動畫的第一次迭代。

這些是從關鍵幀的值（當動畫方向為 "normal" 或 "alternate" 時）或到關鍵幀的值（當動畫方向為 "reverse" 或 "alternate-reverse" 時）。
both 動畫將遵循向前和向后的規則。也就是說，它將在兩個方向上擴展動畫屬性。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： none
返回值： 字符串，表示元素的 animation-fill-mode 屬性。
CSS 版本： CSS3

瀏覽器支持

animationFillMode 是 CSS3 (1999) 特性。

所有瀏覽器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 11

相關頁面

CSS 參考手冊：animation-fill-mode 屬性