停止CSS动画但让其当前迭代完成

Question

我有以下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但这也是一样的.

Answer 1

收到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 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");
    });
});

小提琴:http://jsfiddle.net/sSYYE/1/

请注意,我在.one这里使用(不是.on),因此处理程序只运行一次.这样,以后可以重新启动动画.