CSS3使用Animation为同一个元素添加多个动画效果
本篇文章由: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为同一个元素添加多个动画效果的更多相关文章
- CSS3中Animation为同一个元素添加多个动画效果
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义. 需求说明比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑 ...
- CSS3使用AnimationEnd为同一个元素添加多个动画效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- Android开发之50个常见实用技巧——添加悦目的动画效果
Hack.5 使用TextSwitcher和ImageSwitcher实现平滑过渡 实现步骤: 1.通过findViewById()方法获取TextSwitcher对象的引用Swithcer,当然也可 ...
- jquery插件——点击交换元素位置(带动画效果)
一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...
- jquery为表格行添加上下移动画效果
为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations ar ...
- HackSix 为ViewGroup的子视图添加悦目的动画效果
1.默认情况下他,添加到viewGrop的子视图是直接显示出来的.有一个比较简单的方法可以为这个过程增加动画效果. 2.知识点: 给子视图添加动画效果就用:LayoutAnimationCon ...
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
随机推荐
- [P2526][SHOI2001]小狗散步
Link: P2526 传送门 Solution: 一道提示非常到位的题目 题面中强调了在两个路径相邻点间只能再去至多一个点,且每个点只计算一次贡献 于是明显可以将原题看作询问在两个不相交点集间最多能 ...
- bzoj 2665: [cqoi2012]编号
题目中说任意两个数至少要有3个位上数不相同,那么其实也就是从7个数中选出5个这样任意的组合全部不同,用数组f[i][j][k][l][m][n]记一下就好了,i为第几种组合,一共C(7,5)种,最后爆 ...
- String类的compareTo()和compareToIgnoreCase()
compareTo()的返回值是int,它是先比较对应字符的大小(ASCII码顺序) 1.如果字符串相等返回值0 2.如果第一个字符和参数的第一个字符不等,结束比较,返回他们之间的差值(ascii码值 ...
- php函数前面加&符号 和 变量前面加&符号的意义
php函数前面加&符号 和 变量前面加&符号的意义 php函数前面加&符号的意思是函数的引用返回,php函数前面加&符号有什么作用呢 function &tes ...
- Hiho----拓扑排序
拓扑排序·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选什么课么? 小H ...
- 怎么提高DB的效率
主要从4方面,提高db的效率: 1,建立索引:(巴东) 2,多线程: 3,锁的范围(表级,行级...) 4,内存数据库
- subline text 常用插件
C语言 Alignment c Improved cool format doc Blocker cTags AllAutoComplete wakatime 精确统计你再 ...
- 【spring colud】spring cloud微服务项目搭建【spring boot2.0】
spring cloud微服务项目搭建 =================================== 示例版本: 1.spring boot 2.0版本 2.开发工具 IntellJ IDE ...
- appium+python自动化48-长按(long_press)
前言 长按操作是经常会遇到的场景,通过driver可以直接调出long_press_keycode方法,但是这个方法是长按手机上某个按钮,比如长按电源键,长按home键. 长按某个元素或者长按屏幕上某 ...
- Unity3d通用工具类之定时触发器
时隔多日,好不容易挤出点时间来写写博文.不容易,请送我几朵红花,点个赞也行. 今天呢,我们主要来扩展下通用工具类==>定时触发器. 顾名思义,所谓的定时触发器,就是告诉程序在过多长时间后,我要执 ...