css3動畫監聽以及暫停

為一個元素加上一個動畫class之後你還在用settimeout來延遲下一個動作了，你out啦下面這些絕對是裝逼的知識點。

1.animation動畫監聽

-webkit-animation動畫其實有三個事件： 
開始事件webkitAnimationStart 
結束事件webkitAnimationEnd 
重複運動事件「7」這件事

dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
    console.log("start"); 
}, false); 
dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    console.log("end"); 
}, false); 
dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件
    console.log("end"); //第一遍动画完成输出end
}, false);

ps以上都沒有做相容的處理

這樣我們就可以用很少的settimeout來做連貫的動畫效果了,但是同一個元素的多個動畫效果可能需要嵌套，想了想如果同一個元素為啥不直接在一個animation裡都完成呢，這個可能要具體情況具體分析了

3.animation動畫停止

當你把動畫設定無限的時候，用什麼方法把他停止在當前畫面呢

dom.addEventListener("webkitTransitionEnd", function(){
    console.log("end");
}, false);