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