html5监听动画结束,分享一个监听css3动画（animation）结束事件实例

当css3的animation完成一个动画，我们想让动画保持在终止的状态或其他一些事件，要怎么做呢？

我们可以监听 webkitAnimationEnd 事件就可以// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {

console.log("动画结束");

})

-webkit-animation动画有三个事件：

开始事件: webkitAnimationStart

结束事件: webkitAnimationEnd

重复运动事件: webkitAnimationIteration// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {

console.log("动画开始");

})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {

console.log("动画重复运动");

})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {

console.log("动画结束");

})

示例：

webkitAnimationEnd

css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd

注意：transition 仅有这一个事件

【相关推荐】