CSS3两个动画顺序衔接播放
问题描述:
第一个动画先播放,播放完成后,第二个动画紧接着播放。
解决办法:
1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration );
2. 多个动画应用时用逗号分隔开;
此时,CSS3的动画代码就要分开写了,不能再简写了,诸如animation:rotate-back 10000ms linear infinite这样的简写就是不行的,因为在同一代码中要加入两个动画,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{background:#666;}
img
{
position:absolute;left:200px;top:100px;
animation-name:myfirst, rotate-back;
animation-duration:1000ms, 10000ms;
animation-timing-function:linear, linear;
animation-delay:0, 1000ms;
animation-iteration-count:1, infinite;
animation-fill-mode:forwards, none;
-moz-animation-name:myfirst, rotate-back;
-moz-animation-duration:1000ms, 10000ms;
-moz-animation-timing-function:linear, linear;
-moz-animation-delay:0, 1000ms;
-moz-animation-iteration-count:1, infinite;
-moz-animation-fill-mode:forwards, none;
-ms-animation-name:myfirst, rotate-back;
-ms-animation-duration:1000ms, 10000ms;
-ms-animation-timing-function:linear, linear;
-ms-animation-delay:0, 1000ms;
-ms-animation-iteration-count:1, infinite;
-ms-animation-fill-mode:forwards, none;
-o-animation-name:myfirst, rotate-back;
-o-animation-duration:1000ms, 10000ms;
-o-animation-timing-function:linear, linear;
-o-animation-delay:0, 1000ms;
-o-animation-iteration-count:1, infinite;
-o-animation-fill-mode:forwards, none;
-webkit-animation-name:myfirst, rotate-back;
-webkit-animation-duration:1000ms, 10000ms;
-webkit-animation-timing-function:linear, linear;
-webkit-animation-delay:0, 1000ms;
-webkit-animation-iteration-count:1, infinite;
-webkit-animation-fill-mode:forwards, none;
} /*myfirst*/
@keyframes myfirst {
from {top:-50px;}
to {top:100px;}
} @-moz-keyframes myfirst {
from {top:-70px;}
to {top:100px;}
} @-webkit-keyframes myfirst {
from {top:-300px;}
to {top:100px;}
} @-ms-keyframes myfirst {
from {top:-300px;}
to {top:100px;}
} @-o-keyframes myfirst {
from {top:-300px;}
to {top:100px;}
} /*rotate-back*/
@keyframes rotate-back {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
} @-moz-keyframes rotate-back {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
} @-webkit-keyframes rotate-back {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
} @-ms-keyframes rotate-back {
from {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
} @-o-keyframes rotate-back {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
</style>
</head> <body>
<img src="data:images/s_star.png" alt="" class="s_star">
</body>
</html>
CSS3两个动画顺序衔接播放的更多相关文章
- Spine学习三 - 同时播放两个动画
这个效果和 Unity的动画分层有点儿像,比如 一个人有一个跑的动画,还有一个站在原地挥手的动画,Unity可以通过动画分层,让人物只需要使用这两个动画实现边跑边挥手的动画效果. 首先介绍一下Spin ...
- css3 同时加载两个动画
最近在做H5,遇到这样的需求(如题) 先上一部分代码: .cur .p1d1d4{ width: 3rem; margin: 2rem 5.3rem 0 0; -webkit-animat ...
- CSS3中的动画
CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...
- 分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
- 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- 9款极具创意的HTML5/CSS3进度条动画(免积分下载)
尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- 9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...
- CSS3 :animation 动画
CSS3动画分为二部份: 1.定义动画行为: 使用@keyframes定义动画行为,有两种方式: 方式一:仅定义动画起始样式,与动画结束样式 @keyframes (动画行为名称) { from {b ...
随机推荐
- 深入理解计算机中的 csapp.h和csapp.c
csapp.h其实就是一堆头文件的打包,在http://csapp.cs.cmu.edu/public/code.html 这里可以下载.这是<深入理解计算机系统>配套网站. 在头文件的# ...
- 第二十篇:在SOUI中使用分层窗口
从Windows 2K开始,MS为UI开发引入了分层窗口这一窗口风格.使用分层窗口,应用程序的主窗口可以是半透明,也可以是逐点半透明(即每一个像素点的透明度可以不同). 可以说,正是因为有了分层窗口, ...
- ubuntu中禁用华硕S550C触摸屏的方法
华硕S550C的触摸屏被我一不小心弄了一条裂缝,导致屏幕一直会莫名其妙自动进行点击,严重影响了使用.在windows 系统下通过FN+F7的快捷键可以直接禁用触摸屏,但是换成ubuntu 系统之后,快 ...
- matlab练习程序(Moravec算子)
这个算子算是图像历史上第一个特征点提取算法了,1977年提出的,很简单,拿来练手很合适. 算法原理如下: 1.选取一个合理的邻域遍历图像,这里是5*5邻域的.在邻域中依次计算,垂直,水平,对角与反对角 ...
- hdfs 名称节点和数据节点
名字节点(NameNode )是HDFS主从结构中主节点上运行的主要进程,它指导主从结构中的从节点,数据节点(DataNode)执行底层的I/O任务. 名字节点是HDFS的书记员,维护着整个文件系统的 ...
- thinkphp测试方法
1.如果是单个函数可以使用命令行的模式调试. 2.如果是公用函数可以新增一个控制器函数来测试: 如测试这条公共函数
- coffeeScript学习01
安装 这里使用node.js npm install -g coffee-script # watch and compile coffee -w --output lib --compile src ...
- Python Web 开发的十个框架【转载】
Python 是一门动态.面向对象语言.其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性.除了语言本身的设计目的之外,Python标准 库也是值得大家称赞的,Python甚至还 ...
- mybaties 的一些点
resultMap resutType mybaties缓存 待续 mybaties对应关系是bean和数据库字段的对应. 1.mybaties 的返回值是对象的话定义为resultMap=" ...
- CSS 样式使用
[attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. ...