为一个元素添加一个动画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>