最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3中Animation为同一个元素添加多个动画效果
时间:2022-06-25 13:39:59 编辑:袖梨 来源:一聚教程网
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义。
需求说明
比如说,我想实现一个这样的动画效果:
一颗星星从上往下滑落,当滑落到指定位置时开始闪烁
这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画)
因为 CSS3 Animation 是不能给星星这个元素同时定义这两个动画效果的,所以我们就只能从其它方向入手了。
思考解决方案
我是这样想的,既然不能同时定义两个动画,那能不能在元素执行完第一个动画时,立即定义第二个动画,然后执行呢?
开始按照思路尝试着解决问题
首先就是怎么才能判断第一个动画执行完了呢?(这是关键,这个问题解决了,问题也就迎刃而解了。。。)
经过一番查找,我发现可以通过 事件监听 的方式,来实现这个功能。(没有了 Google, Baidu 也是可以的)
CSS3 Animation 事件监听
这里仅以 -webkit- 为例,并未测试浏览器兼容 (Chrome, Safari 和 Opera 相应内核浏览器有效)
-webkit-animation 动画其实有三个事件:
开始事件 webkitAnimationStart (标准语法为 AnimationStart)
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
因此根据需求,我需要做的就是 监听 结束事件 webkitAnimationEnd (有其它需求,可以尝试监听其它事件,这里以本例为主)
方法总结
先给元素定义第一个滑落的动画效果,并且使用 JS 监听动画结束事件,当监听到第一个动画结束时,移除第一个动画效果,重新定义闪烁的动画效果。
逻辑清楚了,接下来就是实现。
实现功能
主要代码如下:
CSS3 样式:
div {
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 类库):
相关文章
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21
- 《潜行者2:切尔诺贝利之心》使用手电筒方法介绍 11-21
- 《潜行者2:切尔诺贝利之心》回声探测器使用攻略分享 11-21