问题描述：

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

解决办法：

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. 德飞莱STM32单片机学习（一）——下载环境搭建

    一.下载驱动安装. 1.手动打开CH341 文件夹(驱动程序文件夹内) ,双击安装驱动 2. 尼莫M3S 开发硬件设置 硬件需要做到以下2 点:1. USB插入USB1(COM),打开电源开关J14( ...

  2. 导出word使用模版

    在我们做我们的小组项目的时候,刚开始的时候我们用到的是Mvc+EF,用上了我们的ITOO框架.在最开始的计划,我们要用到瑞郎报表.可是呢,由于工期原因以及技术暂时没有实现,我们不得不想一个比较折中的方 ...

  3. SQLServer 本地移动发布/订阅/分发数据库文件并更改逻辑名称和物理文件名

    -------------------------------------------------------------------------------------------------- - ...

  4. OGNL表示式使用和值栈

    另外值得参考博客:http://blog.csdn.net/resigshy/article/details/7560573 OGNL是Object Graphic Navigation Langua ...

  5. loadrunner参数化excel数据

    LR参数化数据源Oracle,MSSQL,Excel参数化的方法: 重点介绍excel数据参数化的方法: 1.首先创建excel表格: 注意要写列明   2.创建excel表连接:   参数化完成后, ...

  6. linux服务器init 5启动图形界面，报错Retrigger failed udev events

    今天因工作需要开启linux系统的桌面环境,使用startx未成功,报如下错误: [root@ /]# startx xauth: creating new authority xinit: No s ...

  7. 实现Web验证码图片-原理

    实现验证码的基础 GDI+ graphics device interface plus的缩写,即图形设备接口.GDI+为开发者提供了一组实现与各种设备(具有图形化能力但不涉及图形细节的设备)进行交互 ...

  8. iphone 数字字段颜色兼容问题

    在iphone手机中,有些字段的颜色会自动发生变化,在head中添加如下meta即可.<meta name = "format-detection" content=&quo ...

  9. js不间断平滑地自动向上滚动

    <html> <head> <title>scroll up auto smooth</title> <style> *{ margin: ...

  10. 最火的.NET开源项目

    综合类 微软企业库 微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管理( ...