HTML | DOM 样式 animationDirection 属性(1)

📌 相关文章

📜 HTML | DOM 样式 animationDirection 属性(1)

📅 最后修改于: 2023-12-03 15:01:12.644000 🧑 作者: Mango

HTML | DOM 样式 animationDirection 属性

介绍

animationDirection 属性定义动画是否应该向前、向后或交替进行播放。

语法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

属性值

normal：动画正常播放。默认值。
reverse：动画反向播放。
alternate：动画交替正常播放与反向播放。首先是正常播放，然后是反向播放，并且循环进行。
alternate-reverse：动画交替反向播放与正常播放。首先是反向播放，然后是正常播放，并且循环进行。
initial：设置属性的默认值（同"unset"）。
inherit：从父元素继承该属性。

实例

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义动画 */
        @keyframes test {
            from { background-color: red; }
            to { background-color: yellow; }
        }
        
        /* 应用动画并设置动画方向 */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: test;
            animation-duration: 2s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>

    <div></div>

</body>
</html>

运行效果：

上述代码中，定义了一个名为"test"的动画，通过设置 animation-direction 属性将动画设置为交替正常播放与反向播放。所以，div 元素首先显示为红色，然后一次正常播放和反向播放，循环进行，实现了背景颜色在红色和黄色之间的交替变化。