使用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); 
});