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

CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义。

需求说明

比如说,我想实现一个这样的动画效果:

一颗星星从上往下滑落,当滑落到指定位置时开始闪烁

这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画)

因为 CSS3 Animation 是不能给星星这个元素同时定义这两个动画效果的,所以我们就只能从其它方向入手了。

思考解决方案

我是这样想的,既然不能同时定义两个动画,那能不能在元素执行完第一个动画时,立即定义第二个动画,然后执行呢?

开始按照思路尝试着解决问题

首先就是怎么才能判断第一个动画执行完了呢?(这是关键,这个问题解决了,问题也就迎刃而解了。。。)

经过一番查找,我发现可以通过 事件监听 的方式,来实现这个功能。(没有了 Google, Baidu 也是可以的)

CSS3 Animation 事件监听

这里仅以 -webkit- 为例,并未测试浏览器兼容 (Chrome, Safari 和 Opera 相应内核浏览器有效)

-webkit-animation 动画其实有三个事件:

开始事件 webkitAnimationStart (标准语法为 AnimationStart)

结束事件 webkitAnimationEnd

重复运动事件 webkitAnimationIteration

因此根据需求,我需要做的就是 监听 结束事件 webkitAnimationEnd (有其它需求,可以尝试监听其它事件,这里以本例为主)

方法总结

先给元素定义第一个滑落的动画效果,并且使用 JS 监听动画结束事件,当监听到第一个动画结束时,移除第一个动画效果,重新定义闪烁的动画效果。

逻辑清楚了,接下来就是实现。

实现功能

主要代码如下:

CSS3 样式:

div {
width: 100px;
height: 100px;
background: red;
position: relative; } .animation1 {
animation: upin 2s ease;
-webkit-animation: upin 2s ease;
} .animation2 {
animation:beat .93s infinite ease ;
-webkit-animation:beat .93s infinite ease ;
} @keyframes upin{
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
} @-webkit-keyframes upin{
0% {
opacity: 0;
-webkit-transform: translateY(-100%)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
} @keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
} @-webkit-keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
}

jQuery 代码(请自行添加 Jquery 类库):

<div id="animationDiv" class="animation1"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var animationDiv = $("#animationDiv");
animationDiv.bind("webkitAnimationEnd", function() {
animationDiv.removeClass("animation1");
animationDiv.addClass("animation2");
});
</script>

参考链接

http://blog.csdn.net/kongjiea/article/details/38614695

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

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

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

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

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

  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. 使用 CSS3 实现超炫的 Loading(加载)动画效果

    SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...

随机推荐

  1. 【hdu1280】前M大的数

    前m大的数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. 【二分】Codeforces Round #417 (Div. 2) C. Sagheer and Nubian Market

    傻逼二分 #include<cstdio> #include<algorithm> using namespace std; typedef long long ll; ll ...

  3. python基础之序列化 time random os

    序列化与反序列化 json  pickle 1.什么是序列化与反序列化? 序列化就是将内存中的数据结构转成一种中间格式储存到硬盘或者基于网络传输 反序列化是网络,硬盘将被序列化的对象重新读到内存 2. ...

  4. Java并发包之闭锁/栅栏/信号量(转)

    本文转自http://blog.csdn.net/u010942020/article/details/79352560 感谢作者 一.Java多线程总结: 描述线程的类:Runable和Thread ...

  5. mysql join优化

    http://www.jb51.net/article/50427.htm 七.性能优化1.显示(explicit) inner join VS 隐式(implicit) inner join 如: ...

  6. BOOST 实用手册(摘录自校友博客)

    1. 序言 现在学的东西很容易忘记,写这篇文章的目的是能让我在需要时快速找回当时的感觉.  Let's BOOST THE WORLD . 2. 编译:VC2005注意 在 属性->C/C++- ...

  7. JAVA项目如何打开,打开乱码怎么办,字体太小怎么办,感叹号是什么情况

    打开java项目 Finish 汉字乱码改这里 字体大小改在第一个的 Appearance里面 项目前面有感叹号,都是tomcat和jdk配置有问题

  8. mybatis批量操作-xml方式

    在实际项目中,我们一般都会用到批量insert.delete.update等操作,由于使用频率还是蛮高的,这里就做个简单的记录,供以后学习和参考. 批量insert 在数据库中,批量插入可以是多条in ...

  9. hive如何使用中文查询条件

    直接在hql中使用中文会报错:org.apache.hadoop.ipc.RemoteException: java.io.IOException: java.lang.RuntimeExceptio ...

  10. 项目中简单使用ztree,简单数据。

    由于公司架构较旧,使用的jdk版本为1.4,页面上也没有el表达式. 加入 js 文件 <% String context = request.getContextPath(); %> & ...