用javascript重复一次css动画

Question

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

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

Answer 1

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

想法是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/