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. 【转载】关于grad_tensors的解惑

    转载:https://www.cnblogs.com/marsggbo/p/11549631.html 平常都是无脑使用backward,每次看到别人的代码里使用诸如autograd.grad这种方法 ...

  2. burpsuite 隐藏 detectportal.firefox.com

        0x00原由 抓包时经常出现detectportal.firefox.com,不利于我们的渗透工作 0x01解决方法 在输入框输入:about:config 然后设置以下选项:network. ...

  3. 推荐一个能让谷歌浏览器变暗色的插件（darkreader）

    下载 https://codechina.csdn.net/mirrors/darkreader/darkreader?utm_source=csdn_github_accelerator 安装教程 ...

  4. 2018.12-2019.1 TO-DO LIST

    AC自动机 P3808 [模板]AC自动机(简单版)(完成时间:2018.12.06) P3796 [模板]AC自动机(加强版)(完成时间:2018.12.06) P2444 [POI2000]病毒( ...

  5. P2260 [清华集训2012]模积和 【整除分块】

    一.题目 P2260 [清华集训2012]模积和 二.分析 参考文章:click here 具体的公式推导可以看参考文章.博主的证明很详细. 自己在写的时候问题不在公式推导,公式还是能够比较顺利的推导 ...

  6. Vue 全家桶学习资源(转)

    companion: React 全家桶学习资源(持续更新) 下面整理了一些关于Vue以及Vue衍生的学习资源: 官网文档 官网API ECMAScript 6 入门 30分钟掌握ES6/ES2015 ...

  7. HDU-6862 Hexagon (2020HDU 多校 D8 H)

    1008 题意:半径为n的六边形(由半径为1的小六边形组成),从某一个小六边形出发有六个方向,找到一条转向次数最多的路径(用方向表示)遍历所有的六边形(一个六边形只访问一次). 题解:先画出n=3/4 ...

  8. 【JVM进阶之路】一：Java虚拟机概览

    1.Java简史 Java语言是一门通用的.面向对象的.支持并发的程序语言.全球从事Java相关开发的人员已经数以百万计. 从1995年"Java"正式出现以来,Java已经经历了 ...

  9. 攻防世界 reverse 进阶 APK-逆向2

    APK-逆向2 Hack-you-2014 (看名以为是安卓逆向呢0.0,搞错了吧) 程序是.net写的,直接祭出神器dnSpy 1 using System; 2 using System.Diag ...

  10. Java自定义 sort 排序方法

    Sort用法 •结构 1 package Test; 2 3 import java.util.Arrays; 4 import java.util.Random; 5 import java.uti ...