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

web前端|css教程

监听，css3，动画，animation

web前端-css教程

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

e4a影视源码带卡密,修改ubuntu 登录主题,热搜爬虫分析,php socket代理,seo全套课件lzw

我们可以监听 webkitAnimationEnd 事件就可以

httpclient 源码下载,ubuntu18.10公测,tomcat7消耗内存,眉山爬虫价格,php生成小程序,大东区创新抖音seo优化怎么样lzw

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

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

em源码,vscode 好玩插件,如何下载ubuntu早期系统,tomcat修改host,访问sqlite闪退,百度编辑器自定义插件,什么是前端ui框架,爬虫服务数据清洗,PHP解密小游戏,国外seo域名,php网站源码可以使用,网页用户登录代码,php微商城模板下载,单页面公司展示,电商订单管理系统源代码,志汇智慧同城微圈小程序11lzw

开始事件: webkitAnimationStart

结束事件: webkitAnimationEnd

重复运动事件: webkitAnimationIteration

// 动画开始时事件o.addEventListener("webkitAnimationStart", function() { console.log("动画开始");})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() { console.log("动画重复运动");})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束");})

示例：

#p1{ 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); }}

var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() { alert("动画开始");})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() { alert("动画重复运动");})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { this.className = ""; alert("动画结束");})

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

注意：transition 仅有这一个事件

【相关推荐】

1. 详细介绍CSS3中animation-direction属性

2. 必须掌握的CSS3动画（Animation）的8大属性

3. 利用animation属性实现循环间的延时执行实例教学

4. 详解css3中两种暂停方式（transition、animation）