暂停按钮_CSS/JS：如何实现动画的暂停和播放

如题所示，我遇到一个常见的动画场景： 让一个圆形图框让它转动起来。当然如果单纯这样做很简单，声明一个keyframe,控制transform: rotate(deg)属性从0到360度变化。然后在animation中使用这个keyframe就可以了。

但是如果在此基础上添加一个要求： 增加动画的暂停和重新播放功能。这样的话又该如何实现呢？就类似于音乐软件的那个转盘，想要让它在音乐暂停的时候转动动画也暂停，等到音乐播放的时候再继续转动

这时候我发现了一个最为关键的问题：传统的animation属性或者keyframe提供的的播放功能是“一镜到底”的，也就是直接从开始播放到结束，没有中断控制的功能。

正当我感到烦恼的时候我查询到了一个我正需要的CSS属性：animation-play-state。它包含有两个值：paused和running。前者可以使animation属性制定的动画处于暂停状态，后者可以使动画处于播放状态。这正是我需要的东西

animation-play-state​developer.mozilla.org

我们看看怎么来使用它吧，下面我们来演示一下，首先我们用@keyframes声明一个动画帧然后在animation