3

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

null
  • 35
  • 7
  • using $('body'), you'd be targeting your entire DOM and pausing all animation. Instead, target the exact DOM element that you plan on pausing - $('.picSlider').css(...). Also, create a fiddle with what you've done. That'll help the community help you better. – VtoCorleone Apr 29 '14 at 17:23
  • This should help: http://stackoverflow.com/questions/10158448/changing-webkit-animation-play-state-with-javascript – stackErr Apr 29 '14 at 17:23

1 Answers1

2

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/

GrumpyKitten
  • 83
  • 1
  • 7
  • Gratitude for this and taking the time to make/post an example. I've retrofitted my code with this, and now it works as I want, thanks again. – null Apr 30 '14 at 01:19
  • One more thing is there a function to reset the animation position? This completely answers what was in the OP, but I now realize that the new background is in whatever position the old one was when it stopped. – null Apr 30 '14 at 01:32
  • I would then move the animation properties into their own class as well (.backdrop-roll). One of the downsides of restarting CSS animations is that you either have to add a small delay or remove the the element from the DOM and re-add. Neither are ideal IMO, but it works. Here's one that works with a small delay: [http://jsfiddle.net/F2nQM/1/](http://jsfiddle.net/F2nQM/1/) – GrumpyKitten Apr 30 '14 at 13:42
  • Thanks so much! You've been a huge help. – null Apr 30 '14 at 23:59