css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件
用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。
第一种方法:
用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数。
setTimeout(function(){ },time);
第二种方法:
当-webkit-animation动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以了。
不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)
拓展:
1、-webkit-animation动画其实有三个事件:
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd;
注意:transition,也仅仅有这一个事件。
css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件的更多相关文章
- css3在动画完成后执行事件
第一种方法: 用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数. setTimeout(function(){ },time); 第二种方法: 当-webkit-animati ...
- CSS3使用AnimationEnd为同一个元素添加多个动画效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- (判断)window.open()窗口被关闭后执行事件
$(function() { // start ready var $article_share=$('#body .article').find('li.share'); // $article_s ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题
PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...
- 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- css3支持动画吗?css3可以用于网页动画的展现吗
CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面. css3动画有2类:一种是transition的,另一种 ...
- CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果
CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果 CREATE CSS3 彩蛋爆料直击现场 CREATE CSS3是一款在线集成众多CSS3功能的生成器,可 ...
随机推荐
- POJ 2227 The Wedding Juicer (优先级队列+bfs+dfs)
思路描述来自:http://hi.baidu.com/perfectcai_/item/701f2efa460cedcb0dd1c820也可以参考黑书P89的积水. 题意:Farmer John有一个 ...
- ios开发之AppDelegate
创建应用程序之后之后,默认有AppDelegate.h文件与AppDelegate.m文件. AppDelegate为何物? AppDelegate为整个应用的一个代理,提供程序启动.退出等类似 ...
- EOF的一点注记
int ch; while( (ch = getchar()) != EOF ) { putchar(ch); } 执行程序,输入:we are the,然后回车.运行结果如下: [purple@lo ...
- Eclipse下Python的MySQLdb的安装以及相关问题
前提是要安装好Python以及eclipse和MySQL的相应版本.本文Python为2.7,MySQL为5.1Eclipse为3.6.2 下载完MySQLdb以后,直接安装即可.在eclipse中启 ...
- GDB下查看内存命令(x命令)
http://blog.csdn.net/allenlinrui/article/details/5964046 可以使用examine命令(简写是x)来查看内存地址中的值.x命令的语法如下所示: x ...
- TestDirector安装配置
一.介绍 TestDirector是全球最大的软件测试工具提供商,公司生产企业级测试管理工具,也是业界第一个基于Web的测试管理系统,它可以在公司内部或外部进行全球范围内测试的管理.通过在一个整体的应 ...
- SPRING IN ACTION 第4版笔记-第九章Securing web applications-011-把敏感信息请求转为https(requiresChannel())
1.把包含敏感信息的请求转为https请求,则较为安全,但如何只把有需要安全的请求转为https,而不是不加分辩就把所有请求都转为https呢?可以用requiresChannel() @Overri ...
- 编码,加解密,签名,Hash
工作中会听到各种各样是是而非的词汇,base64,url,sha256,rsa,hash等等,你能很好的分清这些词语吗? 这次我想把它们统一的整理说明下: 一: 编码 编码是信息从一种形式或格式转换为 ...
- Android 使用全局变量传递数据
使用全局变量传递数据,所谓的全局变量类似于jee开发中的application变量.申明后,全局调用.只有当内存被清理后,才被销毁.否则一直可以调用. 还是使用点击一个button,传递一个数据到另一 ...
- Centos上的屏幕保护
关闭Centos上的屏幕保护:setterm -blank 0 设置Centos上的屏幕保护为5分钟:setterm -blank 5