1

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

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

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

干杯，斯特凡

4

2 回答 2

1

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

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

或者添加一个类名：

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

我不确定您要做什么。

于 2012-07-10T10:15:19.847 回答
1

当动画结束时，您正试图保持 100% 状态，对吧？所以动画从 0% 到 100% 动画，然后在 100% 上它保持这样，如果这就是你想要做的，那么你实际上想要添加这个：

-webkit-animation-fill-mode:forwards;

不需要 js，这将在动画结束时保持 100% 状态。

于 2012-07-11T22:51:48.070 回答