本篇文章由: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. [P2526][SHOI2001]小狗散步

    Link: P2526 传送门 Solution: 一道提示非常到位的题目 题面中强调了在两个路径相邻点间只能再去至多一个点,且每个点只计算一次贡献 于是明显可以将原题看作询问在两个不相交点集间最多能 ...

  2. bzoj 2665: [cqoi2012]编号

    题目中说任意两个数至少要有3个位上数不相同,那么其实也就是从7个数中选出5个这样任意的组合全部不同,用数组f[i][j][k][l][m][n]记一下就好了,i为第几种组合,一共C(7,5)种,最后爆 ...

  3. String类的compareTo()和compareToIgnoreCase()

    compareTo()的返回值是int,它是先比较对应字符的大小(ASCII码顺序) 1.如果字符串相等返回值0 2.如果第一个字符和参数的第一个字符不等,结束比较,返回他们之间的差值(ascii码值 ...

  4. php函数前面加&符号 和 变量前面加&符号的意义

    php函数前面加&符号 和 变量前面加&符号的意义 php函数前面加&符号的意思是函数的引用返回,php函数前面加&符号有什么作用呢 function &tes ...

  5. Hiho----拓扑排序

    拓扑排序·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选什么课么? 小H ...

  6. 怎么提高DB的效率

    主要从4方面,提高db的效率: 1,建立索引:(巴东) 2,多线程: 3,锁的范围(表级,行级...) 4,内存数据库

  7. subline text 常用插件

    C语言 Alignment   c Improved   cool format doc Blocker   cTags   AllAutoComplete       wakatime 精确统计你再 ...

  8. 【spring colud】spring cloud微服务项目搭建【spring boot2.0】

    spring cloud微服务项目搭建 =================================== 示例版本: 1.spring boot 2.0版本 2.开发工具 IntellJ IDE ...

  9. appium+python自动化48-长按(long_press)

    前言 长按操作是经常会遇到的场景,通过driver可以直接调出long_press_keycode方法,但是这个方法是长按手机上某个按钮,比如长按电源键,长按home键. 长按某个元素或者长按屏幕上某 ...

  10. Unity3d通用工具类之定时触发器

    时隔多日,好不容易挤出点时间来写写博文.不容易,请送我几朵红花,点个赞也行. 今天呢,我们主要来扩展下通用工具类==>定时触发器. 顾名思义,所谓的定时触发器,就是告诉程序在过多长时间后,我要执 ...