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

需求说明
比如说，我想实现一个这样的动画效果:

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

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

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

思考解决方案
我是这样想的，既然不能同时定义两个动画，那能不能在元素执行完第一个动画时，立即定义第二个动画，然后执行呢？

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

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

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

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

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

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

结束事件 webkitAnimationEnd

重复运动事件 webkitAnimationIteration

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

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

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

实现功能
主要代码如下:



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>无标题文档</title>

<style>

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)}

}

</style>

</head>

<body>

<div id="animationDiv" class="animation1"></div>

<script type="text/javascript" src="http://m.gzojm.com/dist/js/jquery.min.js"></script>

<script type="text/javascript">

var animationDiv = $("#animationDiv");

animationDiv.bind("webkitAnimationEnd", function() {

    animationDiv.removeClass("animation1");

    animationDiv.addClass("animation2");

});

</script>

</body>

</html>

　　

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

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

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

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

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

  3. Vue中，给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...

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

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

  5. css3中的提供的元素变化属性

    通过 CSS3 提供的2d元素转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. css3中为我们 提供了: translate() rotate() scale() skew() matrix( ...

  6. js中怎么为同级元素添加点击事件

    事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...

  7. css3中Animation

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  8. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  9. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...

随机推荐

  1. JAVA -JSON-XML-MAP转换

      //定义一个MAP对象,将对象传给后端接口接收 Map a = ["api": '11', ZGUID: "1231",BESKZ: "1231& ...

  2. 由于makefile编译所有子目录中 sed 's,/($*/)/.o[ :],/1.o $@ : ,g' <$@ > $@ 的解释

    这个语句分为好几层,我们一层一层来看 1. sed 's,/($*/)/.o[ :],/1.o $@ : ,g' <$@ > $@ 首先看加粗这一层,$@表示目标参数中的.d文件, '&l ...

  3. 扫盲贴|如何评价一款App的稳定性和质量？

    作者:友盟+移动开发专家 张文 「崩溃」与「卡顿」.「异常退出」等一样,是影响App稳定性常见的三种情况.相关数据显示,当iOS的崩溃率超过0.8%,Android的崩溃率超过0.4%的时候,活跃用户 ...

  4. 我与FreeBSD 的故事之二

    那些人的丑恶嘴脸使我发笑,我愈发远离所谓的社区与论坛.电视剧<武林外传>说的好:有人的地方就有江湖,江湖从未走远,从未改变.社区中的冲突很少是技术层面的,按照老话说睿智的人很少发表自己的见 ...

  5. WPF 应用 - 图表 LiveCharts

    引用:LiveCharts,LiveCharts.Wpf 1. 示例 折线图 <Window ... xmlns:lvc="clr-namespace:LiveCharts.Wpf;a ...

  6. 从Android手机的抢红包插件说起

    前语 最近,Android手机上的手机管家更新了新版本,提供了红包闹钟功能,只要有微信红包或者QQ红包,就会自动提醒.恰逢最近又在做UI自动化的工作,使用到UI Automator框架.几行代码,就可 ...

  7. $.ajax data向后台传递参数失败 contentType: "application/json"

    在ajax方法设置中若不添加 contentType: "application/json" 则data可以是对象: $.ajax({ url: actionurl, type: ...

  8. java实现一个点餐系统

    转载于blog.csdn.net/weixin_44219955 项目大体框架 菜品类(菜品id,菜品名,菜品类型,上架时间,单价,月销售,总数量) 管理员类(管理员id,账号,密码) 客户类(客户i ...

  9. A Color Game

    题目大意:  给定一个只包含七种字母的字符串,如果满足一段连续相同的字符长度大于等于K那么即可消除,问最后能不能变为空字符. 题解:很明显是用区间dp来解决,我们设dp[l][r][k]代表的是在[l ...

  10. 攻防世界 reverse 进阶 -gametime

    19.gametime csaw-ctf-2016-quals 这是一个小游戏,挺有意思的 's'-->' '    'x'-->'x'   'm'-->'m' 观察流程,发现检验函 ...