CSS实现动画的暂停和播放

动画场景：让一个圆形图框让它转动起来。当然如果单纯这样做很简单，声明一个keyframe,控制transform: rotate(deg)属性从0到360度变化。然后在animation中使用这个keyframe就可以了。
在这个基础上再要求： 增加动画的暂停和重新播放功能。
这样的话又该如何实现呢？就类似于音乐软件的那个转盘，想要让它在音乐暂停的时候转动动画也暂停，等到音乐播放的时候再继续转动，如下所示。

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

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

下面我们来实现暂停和继续的功能：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
  content="viewport-fit=cover,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />

  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .btns {
      text-align: center;
    }
    .search {
       30px;
      height: 30px;
      margin: 30px auto;
    }
    .serachIcon {
       100%;
      animation: searchRotate 3s linear infinite;
    }
    @keyframes searchRotate {
      0% {
        transform:rotateZ(0deg);
      }
      100% {
        transform:rotateZ(360deg);
      }
    }
    .active {
      animation-play-state: running;
    }
    .paused {
      animation-play-state: paused;
    }
  </style>
</head>

<body>
  <div class="search">
    <img class="serachIcon" src="./img/search.png" alt="">
  </div>
  <div class="btns">
    <button class="paused">暂停/继续</button>
  </div>
  <script src="./js/jquery-2.2.4.min.js"></script>
  <script>
    var playFlag = true;
    $('.paused').on('click', () => {
      if(playFlag) {
        $('.serachIcon').removeClass('active').addClass('paused');
        playFlag = false;
      } else {
        $('.serachIcon').removeClass('paused').addClass('active');
        playFlag = true;
      }
    });
  </script>
</body>
</html>

在style中添加了两个类：active类和paused类，分别设为animation-play-state: running; 和animation-play-state: paused;
当我们点击暂停/继续按钮的时候，给serachIcon添加和删除类名即可。