css animation 动画开始事件和结束事件

如果想在 css animation 动画的开始和结束的时候，做相应的操作，只需要 js 监听相应的事件即可。

animationstart 动画开始事件、animationend 动画结束事件。

代码如下：

ele.addEventListener('animationstart', function () {
    console.log('动画开始了');
}, false);

ele.addEventListener('animationend', function () {
    console.log('动画结束了');
}, false);

此外，animation 还支持 animationiteration 事件，在动画每次重复时触发。如果，动画只执行一次，则不触发。

var i = 0;
ele.addEventListener('animationiteration',function(){
    i++;
    console.log('已经执行了' + i + '次')
},false);