css3 动画停止,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动画停止

当你把动画设置无限的时候，用什么方法把他停止在当前画面呢

.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%;

}

}

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 = '暂停';

}

};

}

公众号