HTML | DOM 样式 animationPlayState 属性

animationPlayState属性用于设置或返回动画的播放状态。它可以控制动画的暂停和继续播放。

语法

element.style.animationPlayState = "paused|running|initial|inherit"

取值

• paused： 暂停动画播放。
• running： 继续播放动画。
• initial： 将该属性重置为其默认值。
• inherit： 从父元素继承该属性的值。

示例

<h1 id="myHeader">Hello World!</h1>

<script>
    const header = document.querySelector("#myHeader");
    header.style.animationName = "example";
    header.style.animationDuration = "4s";
    header.style.animationPlayState = "running";
</script>

在上面的示例代码中，我们为 h1 标签设置了一个名为 example 的动画，持续时间为 4 秒，然后通过 animationPlayState 属性将动画设置为运行状态。

浏览器支持

animationPlayState 属性在所有主流浏览器中都有良好的支持，包括IE11及以上版本。

结论

在 web 开发中，animationPlayState 属性很有用，因为它允许我们动态地控制 CSS 动画的播放状态，从而创建出更好的动画效果。