css 结束动画执行下个动画,如何用js使得一个已经结束的css3的animation动画重新执行一遍...

@keyframes longer {

from {width: 100px;}

to {width: 200px;}

}

@-moz-keyframes longer {

from {width: 100px;}

to {width: 200px;}

}

@-webkit-keyframes longer {

from {width: 100px;}

to {width: 200px;}

}

@-o-keyframes longer {

from {width: 100px;}

to {width: 200px;}

}

#animator {

width: 100px;

height: 100px;

background: red;

}

.animation {

animation: longer 0.5s;

-moz-animation: longer 0.5s;

-webkit-animation: longer 0.5s;

-o-animation: longer 0.5s;

}

var animator = document.getElementById('animator');

animator.addEventListener('animationend', endHandler);

function endHandler() {

animator.removeEventListener('animationend', endHandler);

animator.className = '';

setTimeout(function () {

animator.className = 'animation';

}, 0);

}