我有以下HTML：
<div class="rotate"></div>
和以下CSS：
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
}
}
.rotate {
width: 100px;
height: 100px;
background: red;
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
我想知道是否有一种方法(使用JavaScript)来停止动画，但是让它完成当前的迭代(最好通过改变一个或几个CSS属性)。我已经尝试设置-webkit-animation-name有一个空白值，但是导致元素以惊人的方式跳回到其原始位置。我也尝试将-webkit-animation-iteration-count设置为1，但是这样做也是一样。
解决方法
收到动画片后，停止动画。这样的东西(使用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 class="rotate anim">TEST</div> <input id="stop" type="submit" value="stop it" />
JS
$("#stop").click(function() {
$(".rotate").one('animationiteration webkitAnimationIteration',function() {
$(this).removeClass("anim");
});
});
小提琴：http://jsfiddle.net/sSYYE/1/
请注意，我使用.one这里(而不是.on)，以便处理程序只运行一次。这样，动画可以稍后重新启动。
