<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="@my_programmer">

<title>webkitAnimationEnd</title>

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="format-detection" content="telephone=no"/>

<style type="text/css">

#div{ width:200px; height:200px; background:#f60; margin:100px auto;

}

.fade{ -webkit-animation: fadeOut 2s 1 ease-in-out;}

.change{ -webkit-animation: transform 1s 2 ease; }

@-webkit-keyframes transform {

0% { -webkit-transform: scale(1)}

30% { -webkit-transform: scale(2)}

60% { -webkit-transform: scale(0.5)}

90% { -webkit-transform: scale(1)}

}

@-webkit-keyframes fadeOut { /*通用淡出*/

0% {opacity: 0; }

100% {opacity: 1; }

}

</style>

</head>

<body>

<div id="div" class="fade"></div>

<script type="text/javascript">

var tt = document.querySelector('#div'); 

tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件

    this.className = 'change';

    console.log(2);

}, false);

</script>

</body>

</html>

CSS3使用AnimationEnd为同一个元素添加多个动画效果的更多相关文章

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

    本篇文章由:http://xinpure.com/css3-animation-for-the-same-element-multiple-animation-effects/ CSS3 Animat ...

  2. CSS3中Animation为同一个元素添加多个动画效果

    CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义. 需求说明比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑 ...

  3. Android开发之50个常见实用技巧——添加悦目的动画效果

    Hack.5 使用TextSwitcher和ImageSwitcher实现平滑过渡 实现步骤: 1.通过findViewById()方法获取TextSwitcher对象的引用Swithcer,当然也可 ...

  4. jquery插件——点击交换元素位置（带动画效果）

    一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...

  5. jquery为表格行添加上下移动画效果

    为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations ar ...

  6. HackSix 为ViewGroup的子视图添加悦目的动画效果

    1.默认情况下他,添加到viewGrop的子视图是直接显示出来的.有一个比较简单的方法可以为这个过程增加动画效果. 2.知识点:     给子视图添加动画效果就用:LayoutAnimationCon ...

  7. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  8. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  9. WOW.js——在页面滚动时展现动感的元素动画效果

    插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...

随机推荐

  1. 如何在cmd下切换不同版本的Python

    (1)分别安装python-2.7.12.amd64.msipython-3.5.2-amd64.exe(python官网下载的)顺序无所谓(为了看着方便,我把安装路径修改统一了)(2)配置环境变量D ...

  2. Linux下MySQL数据库常用基本操作 一

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...

  3. linux下服务端实现公网数据转发

    之前在腾讯上使用了一个免费的公网服务器,只有7天,linux系统. 其实有这样的想法,是因为有个研二的师弟问我怎么样才能让连个局域网的电脑通信. 我跟他说了两种方法,一种是找个公网服务器来转发数据,另 ...

  4. SVN冲突解决：当次提交的和上次提交的出现冲突

    转载于知蚁博客,文章地址:http://www.letuknowit.com/archives/svn-conflict-resolution 看到那个*了吧,出现这个标记就说明本地副本的文件已经过期 ...

  5. [转载] 纯手打 第一篇：安装配置gradle

    本文转载自: http://www.cnblogs.com/uncle2000/p/4276833.html 一个bug 一个脚印的叫你们用gradle. 1介于网络上的很多资料都是老的 不适用与现在 ...

  6. Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->Spring Framework的依赖注入和控制反转

    Dependency Injection and Inversion of Control 1.概述: 1.1相关概念 bean:由IoC容器所管理的对象,也即各个类实例化所得对象都叫做bean 控制 ...

  7. 双系统下（Ubuntu + win7）windows 无法连接无线网络

    双系统下(Ubuntu + win7)windows 无法连接无线网络 今天开机登录win7,突然发现无法使用无线网络(WiFi信号标志有个大红叉),于是查看设备驱动,一切正常,这就奇怪了:用Wind ...

  8. IE6/IE7/IE8兼容H5标签

    可以使用html5shiv(html5shiv主要解决HTML5提出的新元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式)来解决 <!--[if lt IE 9 ...

  9. 自用debug单元

    将之前的内存查看单元小幅修改,加上文件操作和计时,组成了一个自用debug单元,使用方法如示例. 此单元便捷之处在于直接将#define DEBUG注释掉而无需改动源码,即可取消debug模式. #d ...

  10. FusionCharts制作报表使用XML导入数据时出现的中文乱码问题

    今天在使用FusionCharts制作报表时用XML导入数据,总是出现乱码问题,下面是我的解决方案. 让FusionCharts支持中文 刚刚将XML导入到html中后,在火狐浏览器一直报Invali ...