使用Jquery停止CSS动画。正确的方法是什么？

Question

我刚刚在一个页面上实现了类似这样的CSS动画：

@-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
}

有一个按钮可以改变背景，我希望图片保持不动，所以我尝试使用Jquery：

$('body').css('-webkit-animation-play-state','paused');

这是我想到的，但出于某种原因它却停止了所有功能。这对我来说很新奇，所以我甚至不知道该查什么（我找到了如何用CSS停止它，而不是使用jQuery事件）。

- null

---

使用 $('body')，您将针对整个 DOM 并暂停所有动画。相反，针对您计划暂停的确切 DOM 元素 - $('.picSlider').css(...)。此外，请创建一个 fiddle 来展示您所做的内容。这将有助于社区更好地帮助您。 - VtoCorleone

这应该会有所帮助：http://stackoverflow.com/questions/10158448/changing-webkit-animation-play-state-with-javascript - stackErr

Answer 1

我会将动画播放状态属性放入它们自己的类中，如下所示：

我会将动画播放状态属性放入它们自己的类中，如下所示：

.play{
    -webkit-animation-play-state: running;
}
.pause{
    -webkit-animation-play-state: paused;
}

然后，您可以使用jQuery来控制动画：

$(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');
        }
    });
});

这里有一个例子：http://jsfiddle.net/F2nQM/。它是关于it技术的内容。

- GrumpyKitten

---

感谢您的付出和抽出时间来制作/发布示例。我已经使用这个对我的代码进行了改进，现在它按照我的要求工作了，再次感谢。 - null

还有一个问题，是否有重置动画位置的函数？这完全回答了OP中的问题，但我现在意识到新背景的位置是停止时旧背景的位置。 - null

我会将动画属性移动到它们自己的类中（.backdrop-roll）。重新启动CSS动画的一个缺点是，你要么必须添加一个小延迟，要么从DOM中删除元素并重新添加。在我看来，两者都不理想，但它可以工作。这里有一个使用小延迟的例子：[http://jsfiddle.net/F2nQM/1/]（http://jsfiddle.net/F2nQM/1/） - GrumpyKitten

非常感谢！你帮了大忙。 - null