Turn Off CSS3 Animation With jQuery?

Question

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

At a certain time, I want JavaScript to turn on a specific animation that occurs endlessly, until JavaScript stops said animation. So I simply made another class named .logo-loading, and at certain times, jQuery does an addClass and a 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;
        }

However, when JavaScript removes the class, the object just keeps rotating no matter what. Is there anything I can do here?

Don't forget to future proof! IE10 and opera are implementing CSS animations so you can also specify -ms and -o prefixes so everyone will be able to see how awesome your site is once they get the latest versions of their browsers! — Jim Jeffers, Feb 20 '12 at 04:18

score 23 · Accepted Answer · answered Feb 19 '12 at 23:09

23

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

function stopAnimation(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...

answered Feb 19 '12 at 23:09

Sinisa Bobic

1,311
10
15

5

You don't need to use prefixes, jQuery will add it for you ;) – Tomas Ramirez Sarduy Nov 06 '15 at 16:39
You read my worries... and solve them instantly! – Ben Viatte Jan 21 '21 at 13:20

score 21 · Answer 2 · edited Mar 08 '22 at 09:48

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://web.archive.org/web/20120614200555/http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

score 0 · Answer 3 · answered Feb 19 '12 at 22:58

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".

Turn Off CSS3 Animation With jQuery?

3 Answers3

Linked