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

Question

我有一个CSS动画。我将它应用到我的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的情况下重置动画？注意：如果我的超时时间是10ms或更短，它也不起作用。

Answer 1

问题是，您无法删除类并重新设置，而无需离开浏览器进行渲染。

非哈克的方式做，这是一点点复杂：使动画除去本身

一个快速和肮脏的实现可以是：

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

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

这将删除动画类从元素开始，当动画结束时。之后，您可以重新设置课程，而不会出现问题

fiddle