js监听css3动画

在做前端页面时，如果一个页面有多套动画特效依次播放。我们一般采用setTimeout延时，就可以完美解决动画依次执行的效果，但存在以下问题：
1、如果动画很多的话会让人感觉很累，因为每个动画动摇计算前方动画所运行的时间。
2、如果中间某个动画的运行时间进行修改的话，后面所有的动画都需要修改。

所以，在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作，所以需要监听动画结束进行回调。JS提供了以下事件用于监听动画的结束：

CSS 动画播放时，会发生以下三个事件：
animationstart -CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发
代码如下：

var monkey = document.querySelector("#monkey");


monkey.addEventListener("animationstart",function(e){
    console.log("start");
},false);


monkey.addEventListener("animationiteration",function(e){
    console.log("");
},false);


monkey.addEventListener("animationend",function(e){
    console.log("end");
},false);

不同的浏览器要求使用不同的前缀：

No prefix - animationstart, animationiteration, animationend
Webkit - webkitAnimationStart, webkitAnimationIteration, webkitAnimationEnd
Mozilla - mozAnimationStart, mozAnimationIteration, mozAnimationEnd
MS - MSAnimationStart, MSAnimationIteration, MSAnimationEnd
O – oAnimationStart, oAnimationIteration, oAnimationEnd