用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. delphi 网络函数

    Delphi网络函数 unit net; interfaceusessysutils,windows,dialogs,winsock,classes,comobj,wininet; //得到本机的局域 ...

  2. hdu 4850 Wow! Such String!(字符串处理,yy)

    题目 参考了博客http://blog.csdn.net/u013368721/article/details/37575165 //用visit[26][26][26][26]来判断新家新区的子母河 ...

  3. HDU 2672 god is a girl (字符串处理,找规律,简单)

    题目 //1,1,2,3,5,8,13,21,34,55…… //斐波纳契数列 #include<math.h> #include<stdio.h> #include<s ...

  4. ios网站,博客

    中文 网站系列 objcio.cncocoachina.comcode4app.com泰然网 博客系列唐巧地球人都知道哈.http://blog.devtang.com/巧哥新出书了,速度入手吧. 虾 ...

  5. ios开发之AppDelegate

    创建应用程序之后之后,默认有AppDelegate.h文件与AppDelegate.m文件.   AppDelegate为何物?  AppDelegate为整个应用的一个代理,提供程序启动.退出等类似 ...

  6. linq 常用语句

    自己练习的 switch (productDataAnalysisQuery.DataType) { : var data = (from hp in GPEcontext.hbl_product j ...

  7. eq相等 ,ne、neq不相等 EL表达式

    eq相等,ne.neq不相等, gt大于, lt小于 gte.ge大于等于   lte.le 小于等于   not非   mod求模   is [not] div by是否能被某数整除   is [n ...

  8. java开发--JavaScript

    http://www.cnblogs.com/hongten/archive/2011/03/21/1990121.html JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正 ...

  9. Centos环境下部署游戏服务器-简介

    一.前言      在接触这个操作系统之前我一直使用的是ubuntu和mac os,这次由于游戏是测试版本,没有专业的运维人员去做这件事情,只能我这个稍微懂一点linux的人来做这件事情了.由于涉及到 ...

  10. QT+VS编译器处理字符串时的坑真是多

    以下因素都有影响:1. QT4与QT5对字符串编码的处理不同(最好不要在源代码里直接写中文,坑更多)2. QTextCodec自动对编码转换的影响3. 源代码文件对编码存储格式的不同会影响编译器对字符 ...