使用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事件來阻止它）。

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/