CSS3中Animation为同一个元素添加多个动画效果

CSS3 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 类库):

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

时间: 2024-10-30 02:44:10

CSS3中Animation为同一个元素添加多个动画效果的相关文章

WPS演示中怎么添加闪烁字幕动画效果

  WPS演示中怎么添加闪烁字幕动画效果 1.打开WPS演示,新建有一个幻灯片,为了不影响制作过程,我删除了标题框和副标题框. 2.点击绘图工具栏--自选图形--基本形状--笑脸,在幻灯片中添加该表情动画. 3.右键点击该表情,选择设置对象格式. 4.在颜色与线条选项卡中,填充色选择填充效果. 5.颜色勾选预设,在预设颜色中选择一种效果,确定. 6.右键点击表情,选择自定义动画,在右侧点击添加效果--进入--盒状. 7.开始选择单击时,方向选择内,速度选为快速. 8.再次点击添加效果--动作路径

PowerPoint 2013为同一个对象依次应用不同动画效果的方法

  1.启动PowerPoint 2013并打开需要设置多个动画效果的幻灯片,在该幻灯片中选择需要添加动画的对象,然后为其添加第一个动画效果,如图1所示. 图1 添加第一个动画效果 2.在该对象被选择的情况下,再次单击"添加动画"按钮,在获得的下拉列表中选择需要添加的动画效果将其赋予对象,如图2所示.在"动画"选项卡"计时"组的"开始"下拉列表中将该动画效果的开始时间设置为"上一动画之后",如图3所示.这样

Swift教程_零基础学习Swift完整实例(八)_swift完整实例(添加View的动画效果、添加View的阴影)

6.添加View的动画效果 本章节主要来做明细页面点击后翻转的动画效果,该效果可以进行多种改变,以达到想要的效果. 1.首先我们需要进行翻转的正反两个view,前面我们已经做好了,分别是PKOElementDetailImageView和PKOElementDetailImageFlippedView,具体翻转动画在明细页面的控制其中进行,触发当然是PKOElementDetailImageView中的点击事件,前文已经提到.2.PKOElementDetailImageView中的点击事件调用

CSS3中Animation动画的定义和调用

现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyframes,英文意思就是关键帧,它相当于我们flash里面的帧. Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个"动画的名称"加上一对花括号"{}",括号中就是一些不同时间段样式 规则,有点像我们c

CSS3中Animation属性的使用详解

  在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做"关键帧",玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起来看看这个"Keyframes"是什么东西.前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说

为ie中不支持的元素添加样式

      在html5即将来临之际,ie下有很多html中元素不支持,如果在其他浏览器下为不支持的元素添加样式是没有问题,但是在ie   下添加样式没有效果,这个问题困扰了我很久,今天终于有答案了,在此小记一下:         大家只需要在页面的开始添加下面一小段代码就行了,例如我要为ie6中不支持的nav元素添加样式,现在我在head标签   中加入下面的代码:        document.createElement("nav"); 加入的样式马上就应用到nav元素上了.  

最近在网页中常用的css和js酷炫动画效果

  最近在网站和博客上能发现使用各种各样很帮效果的动画效果.CodyHouse介绍了这些CSS和Javas cript的编码教程. 因为每个文件都可以整套下载,所以马上就可以使用. 固定背景效果 →效果页 适用的浏览器:Chrome,Safari,Firefox,Opera,IE9+ 在Section和div垂直配置的长页面中,把背景固定,像卷帘被提起似的滚动. 产品展示滑块 →效果页 适用的浏览器:Chrome,Safari,Firefox,Opera,IE9+ 把配置卡片状的各个产品,用很棒

CSS3中clip-path属性和元素使用方法

根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示nav被裁减的效果是一个不简单的任务,我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像,然后把它设置为一个after元素.问题是,至少要解决响应式问题,并且响应式并不完全可控的. 了解CSS属性:clip-path clip-path 是工作草案的一部分,它是一个通过屏蔽和裁减来隐藏元素的一部分的工具.尽管clip-path没有被主流的浏览器支持(包括IE和Firefox),但在web

IOS 添加收藏的动画效果

- (void)showAnimation { CGPoint lbCenter = self.headerImageView.center; //the image which will play the animation soon UIImageView *imageView = [[UIImageView alloc] initWithImage:self.headerImageView.image]; imageView.contentMode = UIViewContentModeS