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

打印页面