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

【问题标题】：Firefox animation-play-state not updating correctly for pseudo elementsFirefox 动画播放状态未正确更新伪元素
【发布时间】：2016-02-18 04:19:11
【问题描述】：

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

在谷歌浏览器中不是这种情况，伪元素应该停止。

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

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

任何帮助表示赞赏:)

【问题讨论】：

标签： html css firefox animation pseudo-element

【解决方案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')" />

【讨论】：