我有以下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但是这样做也一样。
-webkit- animation-name
-webkit-animation-iteration- count
1
收到animationiteration事件后停止动画。像这样(使用jQuery):
animationiteration
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(jQuery)
$("#stop").click(function() { $(".rotate").one('animationiteration webkitAnimationIteration', function() { $(this).removeClass("anim"); }); });
请注意,我在.one这里使用(不是.on),以便处理程序仅运行一次。这样,以后可以重新启动动画。
.one
.on