Question

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

Here是我到目前为止所做的。

我只需要一个可以暂停/恢复动画的按钮。我已经遍布stackoverflow论坛，但我无法为此找到合适的解决方案。

编辑：最好是JavaScript

Answer 1

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

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

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

Answer 2

您可以使用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

Answer 3

试试这个，

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

您也可能需要此引用link和修改后的example

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

3 个答案: