Turn Off Css3 Animation With Jquery?

I have an object that has an animation when the page is loaded: .logo-mark { -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); -moz-animati

Solution 1:

You can just override that CSS properties with "none" to every animation

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

so you can stop animation simply calling this function...

Solution 2:

If you want to pause an animation (and then resume from the point that it was paused) you could toggle it's play state with this CSS property:

.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;
}

You could then use jquery to toggle the paused class:

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

See this example that actually pauses without javascript: http://jsfiddle.net/fRzwS/

And this post on forrst from the fiddle's author: http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

Solution 3:

This works as you'd expect in Firefox, see this jsFiddle:

• http://jsfiddle.net/hNuSd/

So I modified your example (only retained -moz- ones as it's Firefox) to 1s cycles, I start the spinning and then end it after 3.6s. It all works fine, Firefox 11.0 on Xubuntu 11.10.

If you are not using Firefox, can you try in Firefox to confirm they (both your and my examples) work there on your machine? It might be a browser-specific "feature".