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

【问题标题】：CSS3 Animation Rotate, removing animate property makes the animation revert back to its origin positionCSS3 Animation Rotate，删除 animate 属性使动画恢复到其原始位置
【发布时间】：2012-07-12 06:59:48
【问题描述】：

当我使用以下代码使用 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;
}

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

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

干杯，斯蒂芬

【问题讨论】：

我接受纠正，但如果没有 JavaScript，这是不容易做到的。可能有data- 属性的可能性。
CSS 动画不是 CSS 过渡。

标签： css css-animations

【解决方案1】：

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

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

或者添加类名：

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

我不太确定你想做什么。

【讨论】：

谢谢我不知道这个属性存在，这已经解决了问题，而无需使用对多个元素没有很好控制的其他 JS 或 jQuery 动画库。但基本上我有一个由浏览器的滚动事件触发的 cogs 动画。

【解决方案2】：

您试图在动画结束时保持 100% 状态，对吗？所以动画从 0% 变为 100%，然后在 100% 时保持这样，如果这就是你想要做的，那么你真的想添加这个：

-webkit-animation-fill-mode:forwards;

不需要js，动画结束后会保持100%的状态。

【讨论】：

嘿，android.nick，在这种情况下，只需暂停动画就足够了。当我的动画响应用户滚动页面时，我需要使用 JS/jQuery 来触发动画播放和暂停，方法是在图形中删除或添加 css 类。但是知道我可以操纵动画的方向是很有用的，这将在未来的项目中派上用场。非常感谢