用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在动画完成后执行事件的更多相关文章

  1. css3在动画完成后执行事件

    第一种方法: 用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数. setTimeout(function(){ },time); 第二种方法: 当-webkit-animati ...

  2. CSS3使用AnimationEnd为同一个元素添加多个动画效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  3. (判断)window.open()窗口被关闭后执行事件

    $(function() { // start ready var $article_share=$('#body .article').find('li.share'); // $article_s ...

  4. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  5. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  6. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  8. css3支持动画吗?css3可以用于网页动画的展现吗

    CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面. css3动画有2类:一种是transition的,另一种 ...

  9. CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果

    CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果 CREATE CSS3 彩蛋爆料直击现场 CREATE CSS3是一款在线集成众多CSS3功能的生成器,可 ...

随机推荐

  1. jquery ajax post 传递数组 ,多checkbox 取值

    jquery ajax post 传递数组 ,多checkbox 取值 http://w8700569.iteye.com/blog/1954396 使用$.each(function(){});可以 ...

  2. com组件的注册

    错误: 检索 COM 类工厂中 CLSID 为 {79AD7B73-C515-40B4-8B02-CB0F5FA5A1A8} 的组件失败,原因是出现以下错误: 80040154 没有注册类 (异常来自 ...

  3. ElasticSearch使用IK中文分词---安装步骤记录

    提示1:必须保证之前的ES中不存在index, 否则ES集群无法启动, 会提示red! 提示2:下载的IK如果太新,会报错 TokenStream被重载Caused by: java.lang.Ver ...

  4. 李洪强iOS开发之多线程编程2-NSOperation

    前言 1.上一讲简单介绍了NSThread的使用,虽然也可以实现多线程编程,但是需要我们去管理线程的生命周期,还要考虑线程同步.加锁问题,造成一些性能上的开销.我们也可以配合使用NSOperation ...

  5. activity 的四种启动方式

    Activity启动模式设置: <activity android:name=".MainActivity" android:launchMode="standar ...

  6. 【Apache运维基础(3)】虚拟主机配置说明

    建议在主配置文件中增加一句 Include conf/vhosts/*.conf 然后就在vhosts目录下添加虚拟主机配置文件 在配置前打开NameVirtualHost *:80注释,注意此处要与 ...

  7. ps里面的批处理教程

    先打开窗口-动作 1.新建动作文件 打开一张图片,进行图片编辑,编辑完就是把图片保存在一个文件里面.停止动作. 再去打开ps文件-自动- 批处理 只要把 包含所有子文件夹(I)勾起来就行了 设置就能完 ...

  8. python urllib2的proxyhandler

    1. 再a方法中新建了个opener,使用了代理: proxydict = {} proxydict['http'] = "http://%s:%s"%(ip,port) #pri ...

  9. 一行代码设置TLabel.Caption的前世今生

    第零步,测试代码: procedure TForm1.Button1Click(Sender: TObject); begin Label1.Caption := 'Hello World'; end ...

  10. iOS 库文件制作

    一.静态库和动态库的介绍 一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的区别? 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链 ...