Question

在我创建的JS Fiddle中，元素div#load及其::before和::after伪元素都是动画的。但是，如果我将div的animation-play-state更改为'paused'，则只有主要元素停止移动。伪元素继续动画，直到我在检查器中将鼠标悬停在它们上面。如果我再次将其更改为'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);}
}

感谢任何帮助：）

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

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

1 个答案: