@charset "utf-8";
/* CSS Document */

   /*定义钟摆的动画round*/
  @-webkit-keyframes 'round' {
  from{
	   -webkit-transform: rotate(0deg);
     }
  10%{
	 -webkit-transform: rotate(5deg);
  }
  20%{
	 -webkit-transform: rotate(10deg);
  }
  30%{
	 -webkit-transform: rotate(15deg);
  }
  40%{
	 -webkit-transform: rotate(10deg);
  }
  50%{
	 -webkit-transform: rotate(5deg);
  }
  60%{
	 -webkit-transform: rotate(0deg);
  }
  70%{
	 -webkit-transform: rotate(-5deg);
  }
  80%{
	 -webkit-transform: rotate(-10deg);
  }
  90%{
	 -webkit-transform: rotate(-5deg);
  }
  to {
	 -webkit-transform: rotate(0deg);
  }
}

   /*定义360度动画round*/
  @-webkit-keyframes 'round360' {
  from{
	   -webkit-transform: rotate(0deg);
     }
  10%{
	 -webkit-transform: rotate(30deg);
  }
  20%{
	 -webkit-transform: rotate(60deg);
  }
  30%{
	 -webkit-transform: rotate(90deg);
  }
  40%{
	 -webkit-transform: rotate(120deg);
  }
  50%{
	 -webkit-transform: rotate(150deg);
  }
  60%{
	 -webkit-transform: rotate(180deg);
  }
  70%{
	 -webkit-transform: rotate(210deg);
  }
  80%{
	 -webkit-transform: rotate(240deg);
  }
  90%{
	 -webkit-transform: rotate(270deg);
  }
  to {
	 -webkit-transform: rotate(330deg);
  }
}

   /*定义钟摆的动画round*/
  @-webkit-keyframes 'round' {
  from{
	   -webkit-transform: rotate(0deg);
     }
  10%{
	 -webkit-transform: rotate(5deg);
  }
  20%{
	 -webkit-transform: rotate(10deg);
  }
  30%{
	 -webkit-transform: rotate(15deg);
  }
  40%{
	 -webkit-transform: rotate(10deg);
  }
  50%{
	 -webkit-transform: rotate(5deg);
  }
  60%{
	 -webkit-transform: rotate(0deg);
  }
  70%{
	 -webkit-transform: rotate(-5deg);
  }
  80%{
	 -webkit-transform: rotate(-10deg);
  }
  90%{
	 -webkit-transform: rotate(-5deg);
  }
  to {
	 -webkit-transform: rotate(0deg);
  }
}

   /*定义360度动画round*/
  @-webkit-keyframes 'move' {
  from{
	   -webkit-transform: translate(-400px,0);
     }
	5%{
	 -webkit-transform: translate(-350px,0);
  	}
  
  10%{
	 -webkit-transform: translate(-300px,0);
  }
  15%{
	 -webkit-transform: translate(-250px,0);
  }
  20%{
	 -webkit-transform: translate(-200px,0);
  }
  25%{
	 -webkit-transform: translate(-150px,0);
  }
  30%{
	 -webkit-transform: translate(-100px,0);
  }
  35%{
	 -webkit-transform: translate(-50px,0);
  }
  40%{
	 -webkit-transform: translate(-25px,0);
  }
  45%{
	 -webkit-transform: translate(-20px,0);
  }
  50%{
	 -webkit-transform: translate(0px,0);
  }
  55%{
	 -webkit-transform: translate(5px,0);
  }
  60%{
	 -webkit-transform: translate(10px,0);
  }
  65%{
	 -webkit-transform: translate(15px,0);
  }
  70%{
	  -webkit-transform: translate(20px,0);
  }
  75%{
	  -webkit-transform: translate(25px,0);
  }
  80%{
	 -webkit-transform: translate(0,0);
  }
  90%{
	 -webkit-transform: rotate(180deg);
  }
  to {
	 -webkit-transform: rotate(330deg);
  }
}

   /*定义缩放动画round*/
  @-webkit-keyframes 'scale' {
  from{
	   -webkit-transform:scale(0.5,0.5); 
     }
  50%{
	 -webkit-transform: translate(1.5,1.5);
  }
  to {
	 -webkit-transform: translate(1,1);
  }
}

/*定义快速旋转动画round*/
  @-webkit-keyframes 'fastround360' {
  from{
	   -webkit-transform: rotate(0deg);
     }
  50%{
	-webkit-transform: rotate(180deg);
  }
  to {
	 -webkit-transform: rotate(360deg);
  }
}

/*定义变形动画round*/
  @-webkit-keyframes 'skew' {
  0%,30%,80%{
	   -webkit-transform: skew(10deg,10deg);
     }
  50%,15%,65%{
	-webkit-transform: skew(0deg,0deg);
  }
  to {
	 -webkit-transform: skew(20deg,20deg);
  }
}

 /*定义左边进入动画动画moveleft*/
@-webkit-keyframes 'moveleft' {
  from{
	   -webkit-transform: translate(-400px,0);
     }
  50%{
	 -webkit-transform: translate(0,0);
  }
  to {
	 -webkit-transform: translate(0px,0);
  }
}

 /*定义右边进入动画动画moveright*/
@-webkit-keyframes 'moveright' {
  from{
	   -webkit-transform: translate(600px,0);
     }
  50%{
	 -webkit-transform: translate(0,0);
  }
  to {
	 -webkit-transform: translate(0px,0);
  }
}