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

时间:2012-10-25 03:40:46

标签: css css3 animation

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

2 个答案:

答案 0 :(得分:29)

收到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),因此处理程序只运行一次。这样,以后可以重新启动动画。

答案 1 :(得分:1)

你的意思是你想让动画在结束时不停止跳回原来的位置吗?

然后你想要:

动画从一个地方移动到另一个地方的东西,让它留在那里: 动画填充模式:转发;

检查此链接:

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp