使用 javascript 重复一次 css 动画

Question

为什么我不能用 javascript 重复一次 CSS 动画？

小提琴：http://jsfiddle.net/6XtSa/

Answer 1

按钮只旋转一次的原因是它旋转而不是旋转 360°。这是一个绝对值。要再次旋转，您必须从 360° 旋转到 720°。你可能想看看这篇文章：Rotating a Div Element in jQuery 特别是答案之一中的这个jsfiddle：http://jsfiddle.net/uLrVy/

Answer 2

你可以试试这样的：http://jsfiddle.net/6tZd3/

根据Safari CSS Visual Effects Guide，您可以只听webkitTranstionEnd 事件来通知动画已经完成。此时，您可以在不使用 JavaScript 动画的情况下重置动画。

Answer 3

这是一个改编自建议使用类的已删除答案的示例。这个答案并没有让动画完全正确，因为它无限运行。

想法是在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 = '';
});

http://jsfiddle.net/AndyE/9LYAT/