问题描述：

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

解决办法：

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. 在Asp.Net MVC中实现CompareValues标签对Model中的属性进行验证

    在Asp.Net MVC中可以用继承ValidationAttribute的方式,自定制实现Model两个中两个属性值的比较验证 具体应用场景为:要对两个属性值的大小进行验证 代码如下所示: /// ...

  2. java杂记——数组拷贝

    这里介绍两种java提供的数组拷贝方法: (1)Arrays提供的copyOf(T src, T desLength)和copyOfRange(T src, int from, int to) (2) ...

  3. 通信原理实践（五）——2PSK 与2DPSK 通信系统

    一.一些Matlab函数 二.2PSK调制解调,性能分析 1.2PSK调制 (1)图示 (2)Matlab代码 function [ s_t ,bb_t,bits] = psk2_module( nS ...

  4. Emacs 之窗口管理

    // */ // ]]> Emacs 之窗口管理 Table of Contents 1. Emacs 窗口相关 1.1. Emacs 里调整 window 大小 1.2. Emacs winn ...

  5. 使用openface（linux）

    在github上搜索openface,clone下来; 按照requirement.txt中安装需要的项: sudo apt-get install .... sudo pip install ... ...

  6. js与jquery异同

    大家都知道jquery是js的一个库,很多东西大多数简写了,让js写起来特别的方便.但是对与学习的人来说,最好是先学会了js再去学jquery会更好.在学得过程中你会发现两者实现的原理是差不多的,但是 ...

  7. js获取浏览器地址

    <script type="text/javascript"> window.onload = function(){ var txt=""; va ...

  8. jquery.color.js的使用

    Jquery本身不支持变色,Jquery Color.js弥补了这缺陷并为animate动画赋予变色效果,如下红变蓝后执行回调再由蓝变红. <!DOCTYPE html> <html ...

  9. git 学习笔记4--.gitignore

    很多时候,我们都不希望非源码的文件加入到repository管理. 这时,.gitignore文件就上场了. ignore规则 所有空行或者以注释符号 # 开头的行都会被 Git 忽略. 可以使用标准 ...

  10. Ubuntu Mono 运行 Helloworld

    Ubuntu Mono 运行 Helloworld ref: http://www.mono-project.com/docs/getting-started/install/linux/#usage ...