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

我刚刚在如下页面上实现了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
}

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

有一个按钮可以改变背景，我希望图像保持静止，所以我通过Jquery尝试了以下方法：

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

---

这就是我想到的，但由于某种原因，它反而使一切停止运转。这对我来说是新的，所以我甚至不确定要查找什么（我发现如何使用css而不是jquery事件来停止它）

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

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

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

---

下面是一个示例：

使用$（'body'），您将针对整个DOM并暂停所有动画。相反，将您计划暂停的DOM元素定位为-$（'.picSlider'）.css（…）。另外，对你所做的事情做一番修改。这将有助于社区更好地帮助你。这应该会有所帮助：为此表示感谢，并花时间制作/发布一个例子。我已经用这个修改了我的代码，现在它可以正常工作了，再次感谢。还有一件事是有重置动画位置的功能吗？这完全回答了OP中的内容，但我现在意识到新背景在旧背景停止时的任何位置。然后我会将动画属性也移动到它们自己的类中（.background roll）。重新启动CSS动画的一个缺点是，您必须添加一个小延迟，或者从DOM中删除元素并重新添加。两者都不是理想的IMO，但它是有效的。这里有一个小的延迟：非常感谢！你帮了大忙。