监听css3的animation动画和transition事件
webkit-animation动画有三个事件：
- 开始事件: webkitAnimationStart
- 结束事件: webkitAnimationEnd
- 重复运动事件: webkitAnimationIteration
css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd
注意：transition 仅有这一个事件
var o = document.getElementById("div1");
// 动画开始时事件
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的animation动画和transition事件的更多相关文章
- 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- Android 另类方法监听软键盘的弹出收起事件
http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...
- 第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
- CSS3 ：animation 动画
CSS3动画分为二部份: 1.定义动画行为: 使用@keyframes定义动画行为,有两种方式: 方式一:仅定义动画起始样式,与动画结束样式 @keyframes (动画行为名称) { from {b ...
- 以全局监听的方式处理img的error事件
http://www.ovaldi.org/2015/09/11/%E4%BB%A5%E5%85%A8%E5%B1%80%E7%9B%91%E5%90%AC%E7%9A%84%E6%96%B9%E5% ...
- angular指令监听ng-repeat渲染完成后执行自定义事件方法
今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
- 监听浏览器返回，pushState，popstate 事件，window.history对象
在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...
- 事件监听和window.history以及自定义创建事件
1.事件监听window.addEventListener方法: Window.addEventListener(event, function, useCapture); useCapture:表示 ...
随机推荐
- 数论 CF230B T-primes
CF230B T-primes 我们知道质数是只有两个不同的正数因数的正整数.相似的,我们把一个正整数 t 叫做 T质数,如果 t 恰好有三个不同的正整数因数. 你被给了一个含有 n 个正整数的数组. ...
- 《[MySQL技术内幕：SQL编程》读书笔记
<[MySQL技术内幕:SQL编程>读书笔记 2019年3月31日23:12:11 严禁转载!!! <MySQL技术内幕:SQL编程>这本书是我比较喜欢的一位国内作者姜承尧, ...
- six
团队序号:6组 团队名称:拯救地球小分队 团队项目的码云地址:https://gitee.com/lwj5950/seflash 此次博客撰写人姓名:刘威骏 学号:2017*****7168 团队中的 ...
- CDQZ Day4
NOIP 模拟题By liu_runda题目名称 数 论 题源程序文件名 number.cpp theory.cpp problem.cpp输入文件名 number.in theory.in prob ...
- JavaSwing概述
GUI(Graphic User Interface)为程序提供图形界面,它最初的设计目的是构建一个通用的GUI,使其能在所有平台上运行.在Java1.0中基础类AWT(Abstract Window ...
- php尝试调用一个图灵机器人
1.需要到图灵机器人的网址,去注册一下账号.网址:http://www.tuling123.com/sso-web/index.html?ReturnURL=http%3A%2F%2Fwww.tuli ...
- ajax 的error参数
ajax发生错误会进入到error中,我们在这里把错误信息从控制台中输出出来,为了避免每次写ajax都得写好几个console.log(). 我在这里写一个模板,需要用的时候直接过来拷贝. error ...
- python web开发小结
书籍 <python基础教程> <流畅的python> web框架 flask django tornado ORM sqlalchemy orator 消息队列 celery ...
- Monkey基本使用（转载）
什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...
- 面向对象程序设计（C++）_作业一_设计、定义并实现Complex类
源代码: 运行结果: