使用jQuery运行/暂停CSS动画

我想从暂停的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");          
 });

(#click是我想用作动画触发器的div)

如果我删除延迟和后续暂停它工作正常但显然继续循环.

例如：

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

你会有什么好人建议的？

解决方法

当您操作css属性时,jQuery delay()不起作用.请改用setTimeOut()

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