当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 仅有这一个事件
【相关推荐】
1.详细介绍CSS3中animation-direction属性
4.详解css3中两种暂停方式(transition、animation)
위 내용은 分享一个监听css3动画(animation)结束事件实例의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!