Javascript 暂停循环菜单的CSS动画以打开和关闭

我有一个循环菜单，我添加了

动画：脉冲无限

。我的菜单打开了，可以拖动

我需要添加暂停动画，使其在菜单打开和关闭时停止一段时间

我添加了“动画播放状态”、“暂停”，它可以工作，但关闭菜单后动画不会继续

如何使动画恢复

我的代码：

@导入url（“https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@输入“指南针/css3”；
身体{
背景：#fff；
身高：100%；
}
.循环菜单{
宽度：250px；
高度：250px；
保证金：0自动；
位置：相对位置；
z指数：1；
}
.圆圈{
宽度：250px；
高度：250px；
不透明度：0；
-webkit变换：缩放（0）；
-moz变换：比例（0）；
变换：比例（0）；
-webkit过渡：所有0.4s都轻松推出；
-moz过渡：所有0.4都会变缓；
过渡：所有0.4s缓解；
}
.开放式圆圈{
不透明度：1；
-webkit转换：规模（1）；
-moz变换：比例（1）；
变换：比例（1）；
}
.圈出a{
z指数：自动；
文字装饰：无；
颜色：#0081ee；
显示：块；
高度：40px；
宽度：40px；
线高：40px；
左边距：-20px；
利润上限：-20px；
位置：绝对位置；
文本对齐：居中；
}
.工具提示{
位置：固定；
填充：10px 20px；
边框：1px实心#b3c9ce；
边界半径：4px；
文本对齐：居中；
字体：14px/1.3无衬线；
颜色：#333；
背景：#fff；
长方体阴影：3px3pxRGBA（0,0,0,0.3）；
z指数：2；
}
.圆圈a:悬停{
颜色：#0081ee；
}
.菜单按钮{
位置：绝对位置；
顶部：钙（50%-30px）；
左：计算（50%-30px）；
文字装饰：无；
文本对齐：居中；
颜色：#fff；
边界半径：50%；
边界：无；
显示：内联块；
高度：40px；
宽度：40px；
线高：40px；
填充：10px；
背景：#0081ee；
盒影：0 rgba（#0081ee，.5）；
z指数：1；
动画：脉冲1.5s无限；
}
.菜单按钮：悬停{
动画播放状态：暂停；
}
@关键帧脉冲{
0% {
变换：比例（.9）；
}
70% {
转换：比例（1.1）；
盒影：0 40px rgba（#0081ee，0）；
}
100% {
变换：比例（.9）；
盒影：0 rgba（#0081ee，0）；
}
}
.脉冲{
宽度：100%；
身高：100%；
保证金：0自动0；
前景：1 000；
背面可见性：隐藏；
背景：#fff；
}

由于JavaScript（JQuery）覆盖CSS属性，如果您想将任何内容更改回正常状态，则需要使用JavaScript。
将您的功能更改为：

let onClickHandler = function (e) {
  e.preventDefault();
  var a = document.querySelector(".circle");
  document.querySelector(".circle").classList.toggle("open");
  if(a.className == "circle open")
    $(".menu-button").css("animation-play-state", "paused");
  else
    $(".menu-button").css("animation-play-state", "running");
};

---

我不知道JQuery，所以我用JavaScript来做这些事情。

与其总是为暂停动画添加样式，不如尝试切换它。就像打开和关闭菜单一样

在代码段中，我所做的更改是将

动画状态：paused

移动到CSS

.paused

类，然后单击切换该类

var items=document.querySelectorAll（“.a圈”）；
对于（变量i=0，l=items.length；i
@导入url（“https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@输入“指南针/css3”；
身体{
背景：#fff；
身高：100%；
}
.循环菜单{
宽度：250px；
高度：250px；
保证金：0自动；
位置：相对位置；
z指数：1；
}
.圆圈{
宽度：250px；
高度：250px；
不透明度：0；
-webkit变换：缩放（0）；
-moz变换：比例（0）；
变换：比例（0）；
-webkit过渡：所有0.4s都轻松推出；
-moz过渡：所有0.4都会变缓；
过渡：所有0.4s缓解；
}
.开放式圆圈{
不透明度：1；
-webkit转换：规模（1）；
-moz变换：比例（1）；
变换：比例（1）；
}
.圈出a{
z指数：自动；
文字装饰：无；
颜色：#0081ee；
显示：块；
高度：40px；
宽度：40px；
线高：40px；
左边距：-20px；
利润上限：-20px；
位置：绝对位置；
文本对齐：居中；
}
.工具提示{
位置：固定；
填充：10px 20px；
边框：1px实心#b3c9ce；
边界半径：4px；
文本对齐：居中；
字体：14px/1.3无衬线；
颜色：#333；
背景：#fff；
长方体阴影：3px3pxRGBA（0,0,0,0.3）；
z指数：2；
}
.圆圈a:悬停{
颜色：#0081ee；
}
.菜单按钮{
位置：绝对位置；
顶部：钙（50%-30px）；
左：计算（50