如何重新运行css3的动画？

Question

如何通过一个事件（hover，click..）触发css3动画的重新执行？在stackoverflow找到一个相关的问题，但是下面给出的答案也不起作用。http://jsfiddle.net/arunpjohny/8WQcy/1/这篇文章挺好的，介绍了重新运行css3动画的不同方法animation必须是infinite，animation-play-state才有效。restart用这种方法挺好：//retrievetheelementelement=document.getElementById("logo");//resetthetransitionby...element.addEventListener("click",function(e){e.preventDefault;//->removingtheclasselement.classList.remove("run-animation");//->triggeringreflow/*Theactualmagic*///withoutthisitwouldn'twork.Tryuncommentingthelineandthetransitionwon'tberetriggered.element.offsetWidth=element.offsetWidth;//->andre-addingtheclasselement.classList.add("run-animation");},false);

Answer 1

为何不用animationend事件，这个也很好做兼容
el.addEventListener('click',function(){
this.classList.add('active');
this.addEventListener('animationend',function(){
this.classList.remove('active');
});
});