animation-play-state属性用于指定一个动画是处于播放还是暂停状态。可以通过查询该属性来确定动画是否正在运行。另外，它的值可以被设置为暂停或播放动画。
当一个动画被暂停的时候，动画会停止在它被暂停前的状态。当恢复动画的播放时，动画会继续执行没有完成的剩余动画。就像是在播放一个视频，我们可以暂停播放，然后取消暂停状态，继续播放剩下的内容。
你可以为 animation-play-state 属性提供多个值，各个值之间使用逗号来分隔。
如果你为 animation-play-state 属性设置了多个值，这些值通常和属性相关的其它动画属性值一一对应。例如属性、属性和属性等。
例如，如果你为 animation-play-state 属性提供了2个值，那么第一个值将决定由属性指定的第一个动画的播放状态，第二个值决定由属性指定的第二个动画的播放状态。 官方语法
animation-play-state: running | paused
参数值：
running ：当前动画正在运行。 paused ：当前动画处于暂停状态。animation-play-state 的默认值为 running 。
例如下面代码的书写格式都是正确的：
/* 单个动画 */
animation-play-state: running;
animation-play-state: paused;
/* 多重动画 */
animation-play-state: paused, running, running;
/* 全局值 */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;
下面的示例代码中，元素有2个动画，一个处于暂停状态，另外一个处于运行状态。
.element {
animation-name: bounce, shake;
animation-duration: 2s, 3s;
animation-iteration-count: infinite, infinite;
animation-play-state: running, paused;
}
适用范围
animation-play-state 属性可以使用在任何DOM元素，以及 :before 和 :after 伪元素上。
在线演示来看下面的例子，一个时钟的指针在不停的做360度旋转运动，当鼠标滑过时钟时，指针的动画状态被切换为 paused ，指针停止运动。鼠标离开时，指针的动画状态被切换为 running ，指针重新恢复运动。
浏览器支持
完整的兼容性列表可以查看：
查看更多关于animation-play-state的详细内容...