付费节点推荐

免费节点

节点使用教程

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

“所以很多时候，前一个animation动画执行完后，不执行之后动画了。以为是前者覆盖了后者。。。。”

需求说明

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

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

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

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

思考解决方案

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

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

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

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

CSS3 Animation 事件监听

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

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

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

结束事件 webkitAnimationEnd

重复运动事件 webkitAnimationIteration

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

方法总结

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

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

实现功能

主要代码如下:

CSS3 样式:

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)}

}

jQuery 代码(请自行添加 Jquery 类库):

<div id="animationDiv" class="animation1"></div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

var animationDiv = $("#animationDiv");

animationDiv.bind("webkitAnimationEnd", function() {

animationDiv.removeClass("animation1");

animationDiv.addClass("animation2");

});

</script>

未经允许不得转载：Bcoder资源网 » CSS3使用Animation为同一个元素添加多个动画效果

相关推荐

更多优质资源关注微信公众号: bcoder