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. windows电脑上传ipa到appstore的详细流程

    在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布. 但是在苹果开发者中心无法直接上传ipa文件,它要求我们使用xcode或transpo ...

  2. 推荐!!! Markdown图标索引网站

    作者:三十三重天 博客: http://www.zhouhuibo.club 我们在观察别人的文章时候时,总能看到很多有趣的图标,像是这样

  3. JavaCV 树莓派打造监控系统平台

    使用树莓派搭建视频监控平台去年就简单的实现了,只不过功能比较简陋,最近抽时间重构了原来的平台. 环境搭建 环境部分,参考旧版的安装及配置: 树莓派搭建视频监控平台 树莓派视频监控平台实现录制归档 框架 ...

  4. vue-cli3.0 开发环境构建

    vue-cli3.0官网 1.node版本 node版本要求node>=8.9以上(推荐 8.11.0+)使用以下命令查看node版本 node -v 如果不是最新的请到node下载下载最新版本 ...

  5. windows创建签名文件pfx

    https://stackoverflow.com/questions/84847/how-do-i-create-a-self-signed-certificate-for-code-signing ...

  6. PTA 求链表的倒数第m个元素

    6-7 求链表的倒数第m个元素 (20 分)   请设计时间和空间上都尽可能高效的算法,在不改变链表的前提下,求链式存储的线性表的倒数第m(>)个元素. 函数接口定义: ElementType ...

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

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

  8. 错误提示：Access denied for user 'GC'@'localhost' (using password: YES)

    错误描述:使用的是C3P0连接池 Spring整合Mybatis时出现错误 java.sql.SQLException: Access denied for user 'GC'@'localhost' ...

  9. 力扣 - 208. 实现Trie(前缀树)

    目录 题目 思路 代码 复杂度分析 题目 208. 实现 Trie (前缀树) 思路 在我们生活中很多地方都用到了前缀树:自动补全,模糊匹配,九宫格打字预测等等... 虽然说用哈希表也可以实现:是否出 ...

  10. 201871030139-于泽浩 实验二 个人项目D{0-1} KP

    201871030139-于泽浩 实验二 个人项目D{0-1} KP 项目 内容 课程班级博客连接 2018级卓越班 这个作业要求连接 软件工程个人项目 我的课程学习目标 (1)掌握软件项目个人开发流 ...