CSS3 Animation Rotate，移除 animate 属性使动画恢复到其原始位置

Question

当我使用下面的代码使用 CSS3 旋转图形时(这只是 webkit 版本，但我的样式表中有其他浏览器特定版本)。

.bottomSmallCogStopAnimating  {
   -webkit-animation-name: rotate;
   -webkit-animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

我正在使用 jQuery 添加此 css 类以通过删除动画名称来停止动画。

.stopAnimating {
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}

删除此属性似乎会将图形重置回其旋转前的状态，所以我看到的是图形弹出回到其原始旋转状态，这看起来很糟糕。

有没有办法阻止这种情况发生，让浏览器记住它的最后位置并在此时停止动画？

干杯， 斯特凡

Answer 1

从 css 中删除动画，或将其设置为“无”，将恢复到初始状态。 您可以使用以下命令暂停它:

document.getElementsByClassName('bottomSmallCogStopAnimating')[0].webkitAnimationPlayState = 'paused'

或者添加类名:

.stopAnimating {
-webkit-animation-play-state: paused;
}

我不太确定你想做什么。