用按钮暂停和恢复CSS3背景动画？

Question

我想添加一个按钮，可以暂停/恢复动画，最好使用JS。

Here是我到目前为止。

我只需要一个可以暂停/恢复动画的按钮。我查看了所有的stackoverflow论坛，但我无法找到适当的解决方案。

编辑：最好的JavaScript

Answer 1

只需创建一个类来暂停和使用jQuery toggleClass这样

$('.btn').click(function(e){ 
    $('body').toggleClass('paused'); 
}); 

http://jsfiddle.net/469Nw/3/

Answer 2

试试这个，

var paused = false; 
$(".btn").click(function() { 
    document.body.style.animationPlayState = paused ? "running" : "paused"; 
    paused = !paused; 
}) 

你也可能需要此参考文献link和修改后的example

Answer 3

您可以使用animation-play-state对于和使用这样的：

var counter = 1; 
$('button').on('click', function(){ 
if(counter){ 
    $('body').css({'-webkit-animation-play-state': 'paused', 
        'animation-play-state': 'paused'}); 
counter = 0; 
} else{ 
    $('body').css({'-webkit-animation-play-state': 'running', 
        'animation-play-state': 'running'}); 
} 
}); 

demo

[关键帧动画之间暂停]（的