点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
大家可能会经常使用animation来处理一些动画效果，所以对animation这个CSS属性应该是非常熟悉。自定义一个动画过程，然后用animation来设置它的动画时间，动画效果，动画方式等等。
今天我们来想想，我们是否可控制animation的暂停和继续播放了？ 答案是可以的，怎么搞了？一个属性：animation-play-state。
取值：paused（暂停）|running（播放）
竟然知道了用这个属性可以实现，那处理方式就有好多了，下面我来想几种常规思路。
一、通过JavaScript实现
JavaScript动态设置嘛，当用户点击按钮时，将animation-play-state属性设置到DOM上。效果就是下面这样的：
核心代码就是一段监听点击事件和设置animation-play-state属性：
很容易想得到，其实用纯CSS也可以实现animation的播放和暂停。
二、hover代替点击
.stop:hover~.animation {
animation-play-state: paused;
}
三、checked伪类
radio标签的checked伪类，加上
核心代码如下：
#stop:checked ~ .animation {
animation-play-state: paused;
}
#play:checked ~ .animation {
animation-play-state: running;
}
最后总结一下：
除了上面提到的一些处理方式，我现在能想到的至少还有一个伪类能实现，大家动动脑。
分享到:
閱讀更多 小鄭搞碼事 的文章
關鍵字: 编程语言 技术 JavaScript
