使用jQuery運行/暫停CSS動畫

Question

我想從暫停的CSS動畫開始，然後在再次暫停之​​前使用jQuery運行動畫一秒。

CSS中下面：

#animation { 
    -webkit-animation: one 5s infinite; 
    -webkit-animation-play-state: paused; 
} 

@-webkit-keyframes one { 
    0% { .... } 
    ..... 
    100% { .... } 
} 

它有一些複雜的關鍵幀和目的是，它將1秒發揮到20％的位置，然後停止。

我想下面的jQuery的，但它沒有工作：

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running").delay(1000).css("-webkit-animation-play-state", "paused");   
}); 

（＃點擊是我想要的觸發器，動畫使用DIV）

如果我刪除了延遲和隨後暫停它工作正常，但顯然繼續循環。

如：

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running");    
}); 

你會罰款的人建議？

Answer 1

當您操作css屬性時，jQuery delay（）不起作用。使用setTimeOut()代替

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running"); 
    setTimeout(function() { 
     $("#animation").css("-webkit-animation-play-state", "paused"); 
    }, 1000); 
});