使用jQuery关闭CSS3动画？

我有一个加载页面时有动画的对象：

.logo-mark { -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); -ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); } 

在某个时候，我希望JavaScript打开一个无休止地发生的特定动画，直到JavaScript停止所述动画。 所以我只创建了另一个名为.logo-load的类，并且在某些时候，jQuery执行了一个addClass和一个removeClass。

 .logo-loading { -webkit-animation: spin 4s infinite linear; -moz-animation: spin 4s infinite linear; -ms-animation: spin 4s infinite linear; animation: spin 4s infinite linear; } 

但是，当JavaScript删除类时，无论如何，对象都会保持旋转。 我能在这做什么吗？

Answer 1

您可以使用“none”覆盖每个动画的CSS属性

 function stopAnimation(element) { $(element).css("-webkit-animation", "none"); $(element).css("-moz-animation", "none"); $(element).css("-ms-animation", "none"); $(element).css("animation", "none"); } 

所以你可以简单地调用这个函数来停止动画……

Answer 2

如果要暂停动画（然后从暂停时恢复），可以使用此CSS属性切换其播放状态：

 .paused { -ms-animation-play-state:paused; -o-animation-play-state:paused; -moz-animation-play-state:paused; -webkit-animation-play-state:paused; animation-play-state: paused; } 

然后，您可以使用jquery切换暂停的类：

 $("#animatedElement").click(function(e){ $(e.currentTarget).toggleClass("paused"); }); 

看到这个没有javascript实际暂停的例子： http ： //jsfiddle.net/fRzwS/

这篇文章来自小提琴作者： http ：//forrst.com/posts/How_To_Pause_CSS_Animations-0p7

Answer 3

这可以像你在Firefox中所期望的那样工作，请看这个jsFiddle：

• http://jsfiddle.net/hNuSd/

因此，我将您的示例（仅保留-moz- ，因为它的Firefox）修改为1 -moz-循环，我开始旋转，然后在3.6秒后结束。 一切正常，Xubuntu 11.10上的Firefox 11.0。

如果你没有使用Firefox，你可以尝试在Firefox中确认它们（你和我的例子）在你的机器上工作吗？ 它可能是特定于浏览器的“function”。