Javascript 我们如何添加按钮来切换css动画

我想添加按钮来切换动画。我添加了以下代码，但无法切换开始和停止动画

正文.a[类别^=b]{ 宽度：200px； 高度：142.8571428571px； 保证金：0自动； 位置：相对位置； 左：71.4285714286px； -webkit变换原点：左下角； 变换原点：左下角； 边界半径：100%300%； 背景：径向梯度左下角，透明41.4285714286px，ff0c0c 41.4285714286px，3f0000-15px，ff0c0c 71.4285714286px； /*-网络工具包盒阴影：71.4285714286px 71.4285714286px 142.8571428571px暗色*/ 盒影：71.4285714286px 71.4285714286px 142.8571428571px rgb164,69,14； -webkit动画持续时间：5s； 动画持续时间：0.5s； -webkit动画延迟：1s； 动画延迟：1s； -webkit动画计时功能：线性； 动画计时功能：线性； -webkit动画迭代计数：无限； 动画迭代次数：无限； } 演示在这里：

首先，我将此代码删除为html，并将其值更改为stop

<input type="button" id="button" value="stop"></input>

第三，我添加了以下javascript：

  document.getElementById('button').addEventListener('click', function() {
  var animationPlayStateEle = document.querySelectorAll('.a [class^="b"]');

  if (this.value === 'start') {
      Array.from(animationPlayStateEle, function(ele) {
          ele.style.animationPlayState = 'running';
      });
      this.value = 'stop';
  } else if (this.value === 'stop') {
      Array.from(animationPlayStateEle, function(ele) {
          ele.style.animationPlayState = 'paused';
      });
      this.value = 'start';
  }

}, false);

然后，工作完成了； 核心是，当你点击按钮，按钮的值=='stop'，我会改变这个

    .a [class^="b"] {
        animation-play-state: play;
    }

    .a [class^="b"] {
        animation-play-state: paused;
    }

到

在javascript中，通过更改元素的样式； 当你点击按钮，按钮的值=='start'，我会改变这个

    .a [class^="b"] {
        animation-play-state: play;
    }

    .a [class^="b"] {
        animation-play-state: paused;
    }

到

---

清除？

什么按钮？您的小提琴似乎也没有正确配置；你已经把HTML放在JS部分了。我想添加启动/停止动画的按钮。非常感谢陆先生，我得到了我的要求

    .a [class^="b"] {
        animation-play-state: running;
    }