---

CSS3 animation-play-state 属性

概述

animation-play-state 属性是CSS3动画中的一个属性，用于控制元素动画的运行状态。

这个属性可以用来控制动画的暂停和继续，同时还可以在复杂的动画中，控制指定时间段内的动画状态。

语法

animation-play-state 属性的语法如下：

animation-play-state: paused | running | initial | inherit;

其中，属性值解释如下：

• paused：表示动画将被暂停，此时元素会停止运行动画。
• running：表示正常播放动画。
• initial：表示属性被设置为它的初始值。
• inherit：表示属性继承父元素的属性值。

示例

div {
  animation: myanimation 10s infinite;
  animation-play-state: running;
}

div:hover {
  animation-play-state: paused;
}

上面的示例中，一个div元素通过animation属性设置了一个名为“myanimation”的动画，动画周期为10秒，动画播放次数为无限循环。同时，animation-play-state属性被设置为running，表示动画播放状态正常进行。

当鼠标悬停在div元素上时，animation-play-state属性被设置为paused，表示动画被暂停，元素停止播放动画。

兼容性

animation-play-state 属性对于各个浏览器的兼容性如下：

浏览器	兼容性
IE11+	√
Firefox 15+	√
Chrome 43+	√
Safari 9+	√
Opera 30+	√
Android Browser	√
iOS Safari	√

注意事项

• animation-play-state 只控制动画的播放状态，而不会停止动画。如果需要停止动画，应该使用animation-fill-mode属性，并设置其值为forwards。
• 激活动画时，应该始终将animation-play-state属性设置为running，否则可能会出现意想不到的问题。