我想从暂停的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); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。