问题描述：

第一个动画先播放，播放完成后，第二个动画紧接着播放。

解决办法：

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两个动画顺序衔接播放的更多相关文章

  1. Spine学习三 - 同时播放两个动画

    这个效果和 Unity的动画分层有点儿像,比如 一个人有一个跑的动画,还有一个站在原地挥手的动画,Unity可以通过动画分层,让人物只需要使用这两个动画实现边跑边挥手的动画效果. 首先介绍一下Spin ...

  2. css3 同时加载两个动画

    最近在做H5,遇到这样的需求(如题) 先上一部分代码: .cur .p1d1d4{   width: 3rem;   margin: 2rem 5.3rem 0 0;   -webkit-animat ...

  3. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  4. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  5. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  6. 9款极具创意的HTML5/CSS3进度条动画（免积分下载）

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  7. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  8. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

  9. CSS3 ：animation 动画

    CSS3动画分为二部份: 1.定义动画行为: 使用@keyframes定义动画行为,有两种方式: 方式一:仅定义动画起始样式,与动画结束样式 @keyframes (动画行为名称) { from {b ...

随机推荐

  1. C++Primer快速浏览笔记-类型转换

    bool b = 42; // _b is true_ int i = b; // _i has value 1_ i = 3.14; // _i has value 3_ double pi = i ...

  2. Android数据缓存(转)

    Android数据缓存   1.http://blog.csdn.net/lnb333666/article/details/8460159 2.https://github.com/Trinea/a ...

  3. linux下epoll如何实现高效处理百万句柄的

    linux下epoll如何实现高效处理百万句柄的 分类: linux 技术分享 2012-01-06 10:29 4447人阅读 评论(5) 收藏 举报 linuxsocketcachestructl ...

  4. 对于c语言int类型和float,以及double类型表示范围的计算

    首先说一下我原来错误的认识 int是32个bit, 如果我们把第一位理解为符号位,那么很显然int的范围是-(2^31-1)~2^31-1 但是实际上我们都知道int的最小值是-2^31次.. 为什么 ...

  5. 【微信Java开发 --1】内网穿透外网，使用外网域名可以访问到本地项目

    1.首先上https://natapp.cn/ 2.接下来在网站申请账号 3.购买免费隧道 4.为你的免费隧道设置名称以及端口号,由于本人本地的使用Tomcat做服务器,所以用惯了8080端口,因此设 ...

  6. PHPExcel设置数据格式的几种方法

    转自:http://www.cnblogs.com/guangxiaoluo/archive/2013/11/19/3431846.html 解决 PHPExcel 长数字串显示为科学计数 在exce ...

  7. java中的三种取整函数

        舍掉小数取整:Math.floor(3.5)=3 四舍五入取整:Math.rint(3.5)=4 进位取整:Math.ceil(3.1)=4

  8. NDK各版本下载

    含r8e,r9d,r10c 其中x86_64代表64位系统 官网上只有最新版下载链接,如果想要下载以前的版本,可打开 https://archive.org/web/ 然后输入 http://deve ...

  9. JavaScript 之 document对象

    对象属性document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)do ...

  10. 浏览器-02 Chromium的多线程

    Chromium 的多线程机制 概述 每个进程都有很多的线程; 多线程主要是为了保证UI线程(chrome 线程,主线程)不会被任何其它费时的操作阻碍而影响对用户的响应; 为了解决多线程通信和同步问题 ...