点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

大家可能会经常用animation来解决少量动画效果，所以对animation这个CSS属性应该是非常熟习。自己设置一个动画过程，而后使用animation来设置它的动画时间，动画效果，动画方式等等。

今天我们来想想，我们能否可控制animation的暂停和继续播放了？ 答案是可以的，怎样搞了？一个属性：animation-play-state。

取值：paused（暂停）|running（播放）

竟然知道了使用这个属性可以实现，那解决方式就有好多了，下面我来想几种常规思路。

一、通过JavaScript实现

JavaScript动态设置嘛，当使用户点击按钮时，将animation-play-state属性设置到DOM上。效果就是下面这样的：