HTML - DOM樣式物件 animationFillMode 屬性

HTML DOM 樣式物件 **animationFillMode** 屬性指定動畫未播放、動畫結束或動畫包含延遲時元素的樣式。

它覆蓋了 CSS 動畫的預設行為，即 CSS 動畫僅在播放第一個關鍵幀時影響元素，並且動畫在最後一個關鍵幀完成後停止。

語法

以下是獲取或設定 animationFillMode 屬性的語法。

設定 animationFillMode 屬性

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

獲取 animationFillMode 屬性

object.style.animationFillMode;

屬性值

值	描述
none	它不會在執行之前或之後將任何樣式應用於目標。這是預設值。
forwards	動畫結束後，它會應用動畫結束時的屬性值。
backwards	在動畫延遲期間，它會應用在關鍵幀中定義的屬性值，該關鍵幀啟動動畫的第一次迭代。
both	它將 forwards 和 backwards 屬性值都應用於動畫。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

它返回一個字串值，該值表示元素的 animation-fill-mode 屬性。

HTML DOM 樣式物件“animationFillMode”屬性示例

以下示例說明了值為 **forwards** 和 **backwards** 的 animationFillMode 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object animation-Fill-Mode Property
    </title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s 3;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <button onclick="front()">Forwards</button>
    <button onclick="back()">Backwards</button>
    <div id="animation"></div>
    <script>
        function front() {
            document.getElementById("animation")
            .style.animationFillMode = "forwards";
        }
        function back() {
            document.getElementById("animation")
            .style.animationFillMode = "backwards";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
animationFillMode	是 43	是 12	是 16	是 9	是 30

html_dom_style_object_reference.htm

列印頁面