用按鈕暫停和恢復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

[關鍵幀動畫之間暫停]（的