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