问题描述：

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

解决办法：

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. [Linux] 取得服务器版本

    1) 登录到服务器执行 lsb_release -a ,即可列出所有版本信息,例如: [root@3.5.5Biz-46 ~]# lsb_release -a LSB Version: 1.3 Dis ...

  2. input实时监控和获取焦点的问题，oninput，ononfocus

    1.input监控实时输入问题,google浏览器使用oninput,其他浏览器(IE6/7/8)使用onpropertychange var ie = !!window.ActiveXObject; ...

  3. dojo.publish 和 dojo.subscribe

    原文链接:http://www.cnblogs.com/didi/archive/2010/06/13/1757894.html //dojo.publish 和 dojo.subscribe  :d ...

  4. android 瀑布流

    我们还是来看一款示例: 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出现了圆角.下面我简单介绍下实现 ...

  5. 非旋转Treap及可持久化[Merge,Split]

    http://memphis.is-programmer.com/posts/46317.html http://fanhq666.blog.163.com/blog/static/819434262 ...

  6. java中static作用详解

    static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static修饰的成员变量和成员方法独立于该类的任何 ...

  7. opacity

    .css{filter:alpha(opacity:30);/*filter是给IE用到*/opacity:.3; }

  8. suse 不能远程登录

    公司部分机器新装了suse企业版12,远程登录不成功,解决方法如下: 1.关闭防火墙 chkconfig --level SuSEfirewall2_init off 2.配置sshd 3.重启ssh ...

  9. BZOJ 3932 [CQOI2015]任务查询系统 ——可持久化线段树

    [题目分析] 主席树,维护区间大小以及权值之和. 但是细节确实要琢磨很久,WA了几次. [代码] #include <cstdio> #include <cstring> #i ...

  10. 【原】iOS多线程之异步任务+并行队列情况与异步任务+串行队列（主队列）情况

    异步任务+并行队列 把异步任务放到并行队列进行执行,异步任务会在不同的线程中执行. /*异步执行+并行队列*/ - (IBAction)clickBasic1:(UIButton *)sender { ...