为什么我不能用 javascript 重复一次 CSS 动画?
小提琴:http: //jsfiddle.net/6XtSa/
这是一个改编自建议使用类的已删除答案的示例。这个答案并没有让动画完全正确,因为它无限运行。
这个想法是在事件触发click
时添加类并删除它:animationend
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#button.animating {
-webkit-animation-name: rotate;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
}
var btn = document.getElementById('button');
btn.addEventListener('click', function() {
this.className = 'animating';
});
btn.addEventListener('webkitAnimationEnd', function(){
this.className = '';
});
按钮只旋转一次的原因是因为它旋转到而不是360°。这是一个绝对值。要再次旋转,您必须从 360° 旋转到 720°。您可能想看看这篇文章:Rotating a Div Element in jQuery ,特别是答案之一中的这个 jsfiddle:http: //jsfiddle.net/uLrVy/
你可以尝试这样的事情:http: //jsfiddle.net/6tZd3/
根据Safari CSS 视觉效果指南,您可以只听webkitTranstionEnd
事件通知动画已经完成。此时,您可以在不使用 JavaScript 动画的情况下重置动画。