使用jQuery关闭CSS3动画？

Question

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

.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