Html Firefox动画播放状态未正确更新伪元素

在我创建的这个例子中，元素

div#load

及其

：：before

和

：：after

伪元素都是动画。但是，如果我将div的

动画播放状态

更改为

“暂停”

，则只有主元素停止移动。伪元素将继续其动画，直到我在检查器中将鼠标悬停在它们上方。如果我再次将其更改为

“running”

，这三个选项都将继续动画

Google Chrome中的情况并非如此，在Google Chrome中，伪元素应该停止

我应该怎么做才能完全停止动画

HTML:

非常感谢您的帮助：）

我也遇到了同样的问题

似乎使用类来改变状态效果更好。试试这个：

CSS:

或：

（为了可读性，我没有包括供应商前缀属性）

HTML:

<div id="load"></div>
<input type="button" value="Stop Animation" onclick="load.style.animationPlayState='paused';" />
<input type="button" value="Continue Animation" onclick="load.style.animationPlayState='running';" />

#load {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px;
  width: 24px;
  height: 24px;
  border: 4px solid transparent;
  border-left: 4px solid rgba(255,0,0,0.5);
  border-radius: 16px;
  -webkit-animation: r 4s linear 0s infinite;
  -moz-animation: r 4s linear 0s infinite;
  animation: r 4s linear 0s infinite;
}
#load::before, #load::after {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 24px;
  height: 24px;
  border: 4px solid transparent;
  border-radius: 16px;
  -webkit-animation-play-state: inherit !important;
  -moz-animation-play-state: inherit !important;
  animation-play-state: inherit !important;
}
#load::before {
  border-top: 4px solid rgba(0,0,255,0.5);
  -webkit-animation: r 5s linear 0s infinite;
  -moz-animation: r 5s linear 0s infinite;
  animation: r 5s linear 0s infinite;
}
#load::after {
  border-right: 4px solid rgba(0,255,0,0.5);
  -webkit-animation: r 1600ms linear 0s infinite reverse;
  -moz-animation: r 1600ms linear 0s infinite reverse;
  animation: r 1600ms linear 0s infinite reverse;
}
@-webkit-keyframes r {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg);}
}
@-moz-keyframes r {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg);}
}
@keyframes r {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg);}
}

#load.paused { animation-play-state: paused; }

#load.paused:before,
#load.paused:after { animation-play-state: paused; }

<div id="load"></div>
<input type="button" value="Stop Animation" onclick="document.getElementById('load').classList.add('paused')" />
<input type="button" value="Continue Animation" onclick="document.getElementById('load').classList.remove('paused')" />