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