Javascript CSS3重置动画需要超时（如果从外部样式表设置动画）

我有一个CSS动画。我将其应用于具有类span的div元素中的span。我从外部样式表应用它：

.skill > span { width:100%; -moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; }

.anim-skill {width:100%; animation:anim-skill 2s ease-out; -moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; -o-animation:anim-skill 2s ease-out;}

@keyframes anim-skill { from {width:0px;} to  {width:100%} }

当我想在运行时重置动画时，我会执行以下操作：

var mySkill = document.querySelector('.skill');
var bar = mySkill.childNodes[0];
//make it "from" state
bar.style.animation = 'none';
mySkill.style.width = 0;

//make it run
setTimeout(function () {
    mySkill.style.width = '';
    bar.style.animation = '';
}, 20);

---

这是非常令人讨厌的。有没有办法在不使用setTimeout的情况下重置动画？注意：如果我的超时时间小于等于10毫秒，它也不起作用。

问题是，如果不离开浏览器进行渲染，就无法删除类并重新设置

实现这一点的非黑客方式有点复杂：使动画自身移除

快速而肮脏的实现可以是：

$(document).ready(function() {
    var ele = document.getElementById("test");

    ele.addEventListener( 'webkitAnimationEnd', 
    function( event ) { ele.className = ""; }, false );
})

当动画完成时，这将从元素中删除动画类。之后，可以毫无问题地重新设置类

---

啊！太好了，谢谢你了！！我将改为使用此方法！：）之后，当我想启动动画时，我只需再次设置动画。：）