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