首页 > 代码库 > 监听css3动画结束事件-webkitAnimationEnd
监听css3动画结束事件-webkitAnimationEnd
当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("动画结束");})
示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>webkitAnimationEnd</title><style type="text/css">#div1{ margin: 200px auto 0; width: 200px; height: 200px; color: #fff; background-color: #000; -webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform { 0%{ -webkit-transform: scale(1) rotate(50deg); } 30%{ -webkit-transform: scale(2) rotate(100deg); } 6%{ -webkit-transform: scale(0.5) rotate(-100deg); } 100%{ -webkit-transform: scale(1) rotate(0); }}</style></head><body><div id="div1"></div><script type="text/javascript">var o = document.getElementById("div1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() { alert("动画开始");})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() { alert("动画重复运动");})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { this.className = ""; alert("动画结束");})</script></body></html>
css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd
注意：transition 仅有这一个事件
监听css3动画结束事件-webkitAnimationEnd
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。