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

（＃click是我想用作动画触发器的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);
});