HTML - DOM样式对象animation属性

animation 属性用于定义我们所需的样式。我们可以使用 animation 关键字组合 animation-name、animation-duration、animation-iteration-count 等属性。

语法

以下是获取或设置属性的语法。

设置属性

object.style.animation="name duration timingFunction delay iterationCount direction fillMode playState";

获取属性

object.style.animation;

属性值

此属性接受以下列出的值。

值	描述
animationName	它指定附加到选择器的关键帧的名称。其默认值为none。
animationDuration	它指定动画的时间长度。其默认值为0。
animationTimingFunction	它指定动画的速度。其默认值为ease。
animationDelay	它指定动画开始之前的延迟。其默认值为0。
animationIterationCount	它指定动画重复的次数。其默认值为1。
animationDirection	它指定动画是否应该在交替循环中反向播放。其默认值为normal。
animationFillMode	它指定动画结束时要应用的值。其默认值为none。
animationPlayState	它指定动画是正在运行还是暂停。其默认值为running。

返回值

它返回一个字符串值，表示元素的 animation 属性。

HTML DOM 样式对象“animation”属性的示例

以下示例说明了 animation 属性。

更改 div 元素的动画

在下面的示例中，我们将 div 元素的移动方向从（从左到右）更改为（从上到下）。

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object animation Property</title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s infinite;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
        @keyframes down {
            from {
                top: 0px;
            }
            to {
                top: 400px;
            }
        }
    </style>
</head>
<body>
    <p>Click to change the direction of animation.</p>
    <button onclick="fun()">Animate</button>
    <div id="animation"></div>
    <script>
        function fun() {
            document.getElementById("animation").style.animation = "down 5s 3";
        }
    </script>
</body>
</html>

带有延迟和大小变化的动画

在下面的示例中，我们对 div 容器进行了动画处理，使其形状和颜色发生变化，并延迟 2 秒。

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object animation Property</title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s infinite;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
        @keyframes down {
            from {
                top: 0px;
                width: 100px;
                height: 100px;
            }
            to {
                top: 400px;
                width: 200px;
                height: 200px;
                background: yellow
            }
        }
    </style>
</head>
<body>
    <p>Click to change the direction of animation.</p>
    <button onclick="fun()">Animate</button>
    <div id="animation"></div>
    <script>
        function fun() {
            document.getElementById("animation").style.animation = "down 5s 3 2s";
        }
    </script>
</body>
</html>

支持的浏览器

属性
animation	支持 43	支持 12	支持 16	支持 9	支持 30

html_dom_style_object_reference.htm

打印页面