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中移除动画，或将其放到＆＃34; none＆＃34;，将恢复到初始状态。您可以暂停使用：

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

或添加班级名称：

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

我不确定你要做什么。

Answer 2

动画完成时你试图保持100％状态，对吧？所以动画的动画从0％到100％然后在100％上保持不变，如果那是你想要做的，那么你实际上想要添加它：

-webkit-animation-fill-mode:forwards;

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

CSS3动画旋转，删除animate属性会使动画恢复到原点位置

2 个答案: