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

【问题标题】：Pause and resume a CSS3 background animation with a button?使用按钮暂停和恢复 CSS3 背景动画？
【发布时间】：2013-12-10 08:48:41
【问题描述】：

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

Here 是我目前所拥有的。

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

编辑：最好是 JavaScript

【问题讨论】：

Pause between keyframe animations的可能重复
纯css3也可以做dopne，是css3旁边css2的主要扩展……如果你想用js解决这个问题，css3就别提了。

标签： css animation

【解决方案1】：

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

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

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

【讨论】：

谢谢！这正是我所需要的。

【解决方案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

【讨论】：

【解决方案3】：

试试这个，

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

您可能还需要此参考 link 和修改后的 example

【讨论】：