使用 jQuery 运行/暂停 CSS 动画

Posted 2023-05-08

【中文标题】使用 jQuery 运行/暂停 CSS 动画

【英文标题】：run/pause CSS animation with jQuery

【发布时间】：2012-05-08 19:07:50

【问题描述】：

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

你有什么好的建议？

【参考方案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);
);

【讨论】：

啊哈！感谢那。我试图弄清楚如何正确使用 setTimeout，因为当我使用它时，什么都不会发生。