html加载动画怎么停止,使用jQuery运行/暂停CSS动画

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

});

你会有什么好人建议的？