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

Question

在此JS Fiddle我创建的元素 div#load 及其 ::before 和 ::after 伪元素都是动画的。但是，如果我将 div 的 animation-play-state 更改为 'paused'，只有主元素停止移动。伪元素会继续它们的动画，直到我在检查器中将鼠标悬停在它们上方。如果我再次将其更改为 'running'，所有三个都将继续动画。

Google Chrome 不是这种情况，伪元素应该停止。

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

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';" />

CSS:

#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);}
}

感谢任何帮助:)

Answer 1

我遇到了同样的问题。

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

CSS:

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

或:

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

(为了便于阅读，我没有包含供应商前缀属性)

HTML:

<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')" />