CSS3中Animation为同一个元素添加多个动画效果_css animation多个动画-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_25539615/article/details/79160201

本文介绍了如何在CSS3中通过事件监听解决一个元素无法同时执行多个动画的问题。通过监听动画结束事件，可以在一个动画完成时立即应用另一个动画，以此实现星星从上往下滑落并闪烁的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

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

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

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

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

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

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

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

结束事件 webkitAnimationEnd

重复运动事件 webkitAnimationIteration

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

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

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

实现功能
主要代码如下:

<br><br><!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>