动画 animation

代码：

  /* 动画场景 */
  .scene{background:#fad521;height:500px;position:relative;overflow:hidden;
  	-webkit-perspective:800px;
  }
  .scene .item{position:absolute;}
  .scene .balloon{background:url(../../img/docs/balloon.png) no-repeat;width:86px;height:107px;right:-86px;top:120px;
  	-webkit-animation:balloon 4s linear 2s forwards;
  }
  .scene .cloud{background:url(../../img/docs/cloud.png) no-repeat;width:119px;height:75px;right:20px;top:20px;
  	-webkit-animation:cloud 5s linear infinite;
  }
  .scene .dog{background:url(../../img/docs/dog.png) no-repeat;width:73px;height:97px;left:50px;bottom:20px;
  	-webkit-animation:dog 1s ease-in;
  }
  .scene .light{background:url(../../img/docs/light.png) no-repeat 50% 50%;width:770px;height:500px;left:0;top:0;
  	-webkit-animation:light .2s linear 2s backwards;
  }
  .scene .man{background:url(../../img/docs/man.png) no-repeat 50% 50%;width:169px;height:212px;left:50%;top:100px;margin-left:-85px;
  	-webkit-animation:man .2s linear 1.8s backwards;
  }
  .scene .seagull{background:url(../../img/docs/seagull.png) no-repeat;width:124px;height:37px;right:160px;top:80px;
  	-webkit-animation:seagull .5s ease 1.5s backwards;
  }
  .scene .sun{background:url(../../img/docs/sun.png) no-repeat;width:141px;height:139px;left:5px;top:5px;
  	-webkit-animation:sun 1s ease .1s;
  	-moz-animation:sun 1s ease .1s;
  	-o-animation:sun 1s ease .1s;
  	-ms-animation:sun 1s ease .1s;
  	animation:sun 1s ease .1s;
  }
  .scene .xiyangyang{background:url(../../img/docs/xiyangyang.png) no-repeat;width:216px;height:260px;right:50px;bottom:20px;
  	-webkit-transform-style:preserve-3d;
  	-webkit-animation:xiyangyang 2.5s ease-in-out 2.5s backwards;
  }

  /* 热气球 */
  @-webkit-keyframes balloon{
  	0%{
  		opacity:0;
  		-webkit-transform:translate(0, 0);
  	}
  	100%{
  		opacity:1;
  		-webkit-transform:translate(-200px, 0);
  	}
  }

  /* 云彩 */
  @-webkit-keyframes cloud{
  	0%{
  		-webkit-transform:translate(0, 0);
  	}	
  	50%{
  		-webkit-transform:translate(-20px, 10px);
  	}
  	100%{
  		-webkit-transform:translate(0, 0);
  	}
  }

  /* 狗 */
  @-webkit-keyframes dog{
  	0%{
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.1) rotate(-15deg);
  	}
  	20%{
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.2) rotate(0deg);
  	}
  	40%{
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.4) rotate(15deg);
  	}
  	60%{
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.6) rotate(0deg);
  	}
  	80%{
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.8) rotate(-15deg);
  	}
  	100%{
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(1) rotateZ(0deg);
  	}
  }

  /* 光 */
  @-webkit-keyframes light{
  	0%{
  		-webkit-transform:scale(0);
  	}
  	100%{
  		-webkit-transform:scale(1);
  	}
  }

  /* 人 */
  @-webkit-keyframes man{
  	0%{
  		-webkit-transform:translate(0, -320px);
  	}
  	100%{
  		-webkit-transform:translate(0, 0);
  	}
  }

  /* 海鸥 */
  @-webkit-keyframes seagull{
  	0%{
  		opacity:0;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.1) rotate(-15deg);
  	}
  	20%{
  		opacity:0;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.2) rotate(0deg);
  	}
  	40%{
  		opacity:1;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.4) rotate(15deg);
  	}
  	60%{
  		opacity:1;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.6) rotate(0deg);
  	}
  	80%{
  		opacity:1;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.8) rotate(-15deg);
  	}
  	100%{
  		opacity:1;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(1) rotateZ(0deg);
  	}
  }

  /* 太阳 */
  @-webkit-keyframes sun{
  	0%{
  		opacity:0;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.1) rotate(0deg);
  	}
  	33%{
  		opacity:0;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.3) rotate(0deg);
  	}			
      50%{
  		opacity:1;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(.5) rotate(180deg);
  	}
  	100%{
  		opacity:1;
  		-webkit-transform-origin:50% 50%;
  		-webkit-transform:scale(1) rotate(360deg);
  	}
  }

  /* 喜洋洋 */
  @-webkit-keyframes xiyangyang{
  	0%{
  		-webkit-transform:translate(265px, 0);
  	}
  	50%{
  		-webkit-transform:rotateY(0deg);
  	}			
  	100%{
  		-webkit-transform:rotateY(360deg);
  	}
  }