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. 使用pycallgraph分析python代码函数调用流程以及框架

    技术背景 在上一篇博客中,我们介绍了使用量子计算模拟器ProjectQ去生成一个随机数,也介绍了随机数的应用场景等.但是有些时候我们希望可以打开这里面实现的原理,去看看在产生随机数的过程中经历了哪些运 ...

  2. SpringMVC-02 第一个SpringMVC程序

    SpringMVC-02 第一个SpringMVC程序 第一个SpringMVC程序 配置版 新建一个Moudle , springmvc-02-hello,确定依赖导入进去了 1.配置web.xml ...

  3. ajax轮询原理及其实现方式

    ajax轮询原理及其实现方式 ajax轮询的两种方式 方式1:设定一个定时器,无论有无结果返回,时间一到就会继续发起请求,这种轮询耗费资源,也不一定能得到想要的数据,这样的轮询是不推荐的. 方式2: ...

  4. PTE 准备之 Describe Image

    25s 准备时间:决定用什么模板,用模板cover那些信息点 Content: 数字和文字哪个多,就多说哪个,均匀覆盖 Fluency : 保持流利度 不要纠结时态,单复数,人称代词等 时间要求: 尽 ...

  5. 攻防世界 csaw2013reversing2 CSAW CTF 2014

    运行程序 flag显示乱码 IDA打开查看程序逻辑 1 int __cdecl __noreturn main(int argc, const char **argv, const char **en ...

  6. C++11正则表达式

  7. 复制粘贴Ctrl+C改为自定义单键

    目录 那一瞬间不想用Ctrl+C了 (一)搜索渠道 关键词搜索 (二)方案对比 (三)最终方案Ditto 使用方法 (四)案例 1. 替换Ctrl+C快捷键: 2. 将英文小写替换为大写: 那一瞬间不 ...

  8. Java中的面向切面编程（AOP）

    一.什么是AOP? Aspect Oriented Programming ,即面向切面编程. AOP是对面向对象编程的一个补充. 它的目的是将复杂的需求分解为不同的切面,将散布在系统中的公共功能集中 ...

  9. PAT (Advanced Level) Practice 1042 Shuffling Machine (20 分) 凌宸1642

    PAT (Advanced Level) Practice 1042 Shuffling Machine (20 分) 凌宸1642 题目描述: Shuffling is a procedure us ...

  10. 谷歌SRE运维模式解读

    谷歌SRE运维模式解读 前面我和你分享了一些关于运维组织架构和协作模式转型的内容,为了便于我们更加全面地了解先进的运维模式,今天我们再来谈一下谷歌的SRE(Site Reliability Engin ...