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-loading的类，在某些时候，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秒循环，我开始旋转，然后在3.6秒后结束。一切正常，Xubuntu 11.10上的Firefox 11.0。

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

使用jQuery关闭CSS3动画？

3 个答案: