停止CSS动画，但让其当前迭代结束

停止CSS动画，但让其当前迭代结束

收到

animationiteration

事件后停止动画。像这样（使用jQuery）：

CSS

@-webkit-keyframes rotate {  to {    -webkit-transform: rotate(360deg);  }}.rotate {    width: 100px;    height: 100px;    background: red;}.rotate.anim {    -webkit-animation-name:  rotate;    -webkit-animation-duration:         5s;    -webkit-animation-iteration-count:  infinite;    -webkit-animation-timing-function:  linear;}

HTML

<div >TEST</div><input id="stop" type="submit" value="stop it" />

JS（jQuery）

$("#stop").click(function() {    $(".rotate").one('animationiteration webkitAnimationIteration', function() {        $(this).removeClass("anim");    });});

请注意，我在

.one

这里使用（不是

.on

），以便处理程序仅运行一次。这样，以后可以重新启动动画。