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

.dianyangse
{

position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
0%   {background:red; }
25%  {background:yellow; text-shadow:2px 2px 0 #0a6167;}
50%  {background:blue; }
75%  {background:green;}
100% {background:red; }
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;  }
25%  {background:yellow;}
50%  {background:blue; }
75%  {background:green; }
100% {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; }
25%  {background:yellow; }
50%  {background:blue; }
75%  {background:green; }
100% {background:red;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; }
25%  {background:yellow; }
50%  {background:blue; }
75%  {background:green; }
100% {background:red; }
}




.animated {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*左边*/
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}


/*右边*/
.slideInRight{
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

/*底部*/
.slideInDown{
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInUP{
  -webkit-animation-name: slideInUP;
  animation-name: slideInUP;
}
@-webkit-keyframes slideInUP {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInUP {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}


.goMv{ 
animation-name:goMv;
animation-duration:4s;
animation-iteration-count:1;/*运动循环次数*/
animation-fill-mode: both;/*运动结束不返回*/
-webkit-animation-name:goMv;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:1;/*运动循环次数*/
-webkit-animation-fill-mode: both;/*运动结束不返回*/

}
@-webkit-keyframes goMv
{0%{ opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);}
25%{
	 opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
	}
30%{ opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);}
40%{ opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform:scale(1.05);}
45%{ -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);}
60%{opacity: 1;
    -webkit-transform:scale(1);
    -ms-transform: scale(1);
    transform:scale(1);}

 70% {
	   
    transform:rotate(-0deg);    
-webkit-transform:rotate(-0deg);    
-moz-transform:rotate(-0deg);    
-o-transform:rotate(-0deg);    
-ms-transform:rotate(-0deg);
  }

  100% {	 
    transform:rotate(360deg);    
-webkit-transform:rotate(360deg);    
-moz-transform:rotate(360deg);    
-o-transform:rotate(360deg);    
-ms-transform:rotate(360deg);
  }
}
@keyframes goMv
{
	
0%{ opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);}
25%{
	 opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
	}
30%{ opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);}
40%{ opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform:scale(1.05);}
45%{ -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);}
60%{opacity: 1;
    -webkit-transform:scale(1);
    -ms-transform: scale(1);
    transform:scale(1);}

 65% {
	   
    transform:rotate(-0deg);    
-webkit-transform:rotate(-0deg);    
-moz-transform:rotate(-0deg);    
-o-transform:rotate(-0deg);    
-ms-transform:rotate(-0deg);
  }

  100% {	 
    transform:rotate(360deg);    
-webkit-transform:rotate(360deg);    
-moz-transform:rotate(360deg);    
-o-transform:rotate(360deg);    
-ms-transform:rotate(360deg);
  } 	
}

/*向下*/
.goMvx{ 
animation-name:goMvx;
animation-duration:4s;
animation-iteration-count:1;/*运动循环次数*/
animation-fill-mode: both;/*运动结束不返回*/
-webkit-animation-name:goMvx;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:1;/*运动循环次数*/
-webkit-animation-fill-mode: both;/*运动结束不返回*/

}
@-webkit-keyframes goMvx
{0%{ opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);}
25%{
	 opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
	}
30%{ opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);}
40%{ opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform:scale(1.05);}
45%{ -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);}
60%{opacity: 1;
    -webkit-transform:scale(1);
    -ms-transform: scale(1);
    transform:scale(1);}

}
@keyframes goMvx
{
	
0%{ opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);}
25%{
	 opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
	}
30%{ opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);}
40%{ opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform:scale(1.05);}
45%{ -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);}
60%{opacity: 1;
    -webkit-transform:scale(1);
    -ms-transform: scale(1);
    transform:scale(1);}



}