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. vscode中js文件使用typescript语法报错，如何解决

    原因:由于vcode自身的语法检查有些问题 解决办法:在设置里面加上 "javascript.validate.enable": false 禁用默认的 js 验证 总结: 由于v ...

  2. 剑指 Offer 61. 扑克牌中的顺子 + 简单题 + 思维

    剑指 Offer 61. 扑克牌中的顺子 Offer_61 题目描述 java代码 package com.walegarrett.offer; /** * @Author WaleGarrett * ...

  3. Node.js 模块化你所需要知道的事

    一.前言 我们知道,Node.js是基于CommonJS规范进行模块化管理的,模块化是面对复杂的业务场景不可或缺的工具,或许你经常使用它,但却从没有系统的了解过,所以今天我们来聊一聊Node.js模块 ...

  4. FreeBSD 发布 2020 年 Q3 季度报告

    FreeBSD 几日前发布 Q3 季度报告,介绍了在过去第三季度里 FreeBSD 完成的工作和相关项目,涉及到架构支持.内核改进.持续集成和驱动程序优化等. 列举部分如下: FreeBSD 基金会目 ...

  5. vue全家桶和react全家桶

    vue全家桶:vue  +  vuex (状态管理)  + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + re ...

  6. 在SSM框架中如何将图片上传到数据库中

    今天我们来看看SSM中如何将图片转换成二进制,最后传入到自己的数据库中,好了,废话不多说,我们开始今天的学习,我这里用的编辑器是IDEA 1.导入图片上传需要的jar依赖包 1 <depende ...

  7. 力扣 - 347. 前 K 个高频元素

    目录 题目 思路1(哈希表与排序) 代码 复杂度分析 思路2(建堆) 代码 复杂度分析 题目 347. 前 K 个高频元素 思路1(哈希表与排序) 先用哈希表记录所有的值出现的次数 然后将按照出现的次 ...

  8. Java字节流和字符流，是时候总结一下IO流了

    目录 从接收输入值说起 字节流读取 字符流读取 Scanner 读取 什么是 IO 流 字节流和字符流 字节流 字节输入流 字节输出流 缓冲流的原理 字符流 字符输入流 字符输出流 为什么字符流需要 ...

  9. JVMGC+Spring Boot生产部署和调参优化

    一.微服务开发完成,IDEA进行maven clean和package 出现BUILD SUCCESS说明打包成功 二.要求微服务启动时,配置JVM GC调优参数 p.p1 { margin: 0; ...

  10. BUAAOO第一单元代码分析

    1.HomeWork1 思路 一个主类用于字符串得操作, 一个Poly类用于对一个多项式进行抽象,用Arraylist来对term进行封装.内部含有求导方法,添加并合并同类项的方法,toString方 ...