Using Jquery to stop css animation. What is the proper way to do this?

Question

I just implemented CSS animation on a page like this:

@-webkit-keyframes backdrop-roll{
    to { background-position-x:100%; }
}
body
{
background-image:url('http://www.wallmay.net/thumbnails/detail/20120331/pokemon%20fields%20ruby%201920x1200%20wallpaper_www.wallmay.com_2.jpg');
background-size: 800px 650px; 
-webkit-animation: backdrop-roll 8s linear infinite;
-webkit-animation-direction:normal
}

There's a button that changes the background and I want that image to stay still so I tried this via Jquery:

$('body').css('-webkit-animation-play-state','paused');

That was what came to mind, but for some reason it instead stops everything from working. This is new to me so I'm not sure what to even look up(I find how to stop it with css not a jquery event).

Answer 1

I would place the animation play state properties into their own classes like this:

.play{
    -webkit-animation-play-state: running;
}
.pause{
    -webkit-animation-play-state: paused;
}

Then you can use jQuery to control the animation:

$(document).ready(function(){
    $('body').addClass('play');

    $('#pause').click(function(){
        if($('body').hasClass('play')){
            $('body').removeClass('play');
        }
    });

    $('#resume').click(function(){
        if(!$('body').hasClass('play')){
            $('body').addClass('play');
        }
    });
});

Here's an example: http://jsfiddle.net/F2nQM/