css3動畫監聽以及暫停

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

1.animation動畫監聽

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

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);

2.transition動畫監聽

this動畫只有webkitTransitionEnd這一個事件

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

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

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

3.animation動畫停止

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

<style type="text/css">.love {    display: block;    width: 100px; height: 100px;    background: url(http://www.zhangxinxu.com/study/201512/web_heart_animation.png) 0 0 no-repeat;    background-size: 2900%;    animation: heart-burst steps(28) 0.8s infinite both;}//圖片背景的動畫    .stop {    animation-play-state: paused;}@keyframes heart-burst {  0% {    background-position: 0%;  }  100% {    background-position: 100%;  }}</style><i id="testImg" class="love"></i><p><input type="button" id="testBtn" value="暫停"></p><script type="text/javascript">    var image = document.getElementById("testImg"),     button = document.getElementById("testBtn");        if (image.classList && image && button) {        button.onclick = function() {            if (this.value == '暫停') {                image.classList.add('stop');                this.value = '播放';            } else {                image.classList.remove('stop');                this.value = '暫停';            }        };    }    </script>

