@charset "utf-8";
/* CSS Document */
 
/**************进场***************/
/*由小到大*/ 
.FromSmallToLarge{
    -webkit-animation:FromSmallToLarge 1s .2s ease both;
    -moz-animation:FromSmallToLarge 1s .2s ease both;
    animation:FromSmallToLarge 1s .2s ease both;
}
/*由上到下*/
.FromUpToDown{
    -webkit-animation:FromUpToDown 1s .2s ease both;
    -moz-animation:FromUpToDown 1s .2s ease both;
    animation:FromUpToDown 1s .2s ease both;
}
/*由下到上*/
.FromDownToUp{
    -webkit-animation:FromDownToUp 1s .2s ease both;
    -moz-animation:FromDownToUp 1s .2s ease both;
    animation:FromDownToUp 1s .2s ease both;

}
/*由左到右进场*/
.FromLeftToRight{
    -webkit-animation:FromLeftToRight 1s .2s ease both;
    -moz-animation:FromLeftToRight 1s .2s ease both;
    animation:FromLeftToRight 1s .2s ease both;
}
/*由右到左进场*/
.FromRightToLeft{
    -webkit-animation:FromRightToLeft 1s .2s ease both;
    -moz-animation:FromRightToLeft 1s .2s ease both;
    animation:FromRightToLeft 1s .2s ease both;

}
 /*360度循环旋转*/
 .Infinite360Rotate{
     -webkit-animation:Infinite360Rotate 2500ms 200ms infinite linear both;
     -moz-animation:Infinite360Rotate 2500ms 200ms infinite linear both;
     animation:Infinite360Rotate 2500ms 200ms infinite linear both;
 }
  

  /*淡入*/
 .FadeIn{
     -webkit-animation:FadeIn 2500ms 200ms infinite linear both;
     -moz-animation:FadeIn 2500ms 200ms infinite linear both;
     -o-animation:FadeIn 2500ms 200ms infinite linear both;
     animation:FadeIn 2500ms 200ms infinite linear both;
 }


 
































/*************************进场**************************/
/******由小到大进场*********/
@-webkit-keyframes FromSmallToLarge{
0%{opacity:0;
-webkit-transform:scale(.3)}
50%{opacity:1;
-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes FromSmallToLarge{
0%{opacity:0;
-moz-transform:scale(.3)}
50%{opacity:1;
-moz-transform:scale(1.05)}
70%{-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}
}
@keyframes FromSmallToLarge{
0%{opacity:0;
transform:scale(.3)}
50%{opacity:1;
transform:scale(1.05)}
70%{transform:scale(.9)}
100%{transform:scale(1)}
}


/******由上到下进场*********/
@-webkit-keyframes FromUpToDown{
0%{opacity:0;
-webkit-transform:translateY(-2000px)}
60%{opacity:1;
-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes FromUpToDown{
0%{opacity:0;
-moz-transform:translateY(-2000px)}
60%{opacity:1;
-moz-transform:translateY(30px)}
80%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}
@keyframes FromUpToDown{
0%{opacity:0;
transform:translateY(-2000px)}
60%{opacity:1;
transform:translateY(30px)}
80%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}




@-webkit-keyframes TopToBottomAnimate{
    0% { -webkit-transform:translate(0,-800px);}
    100% { -webkit-transform:translate(0,0px);}
}


/******由下到上进场*********/
@-webkit-keyframes FromDownToUp{
0%{opacity:0;
-webkit-transform:translateY(2000px)}
60%{opacity:1;
-webkit-transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes FromDownToUp{
0%{opacity:0;
-moz-transform:translateY(2000px)}
60%{opacity:1;
-moz-transform:translateY(-30px)}
80%{-moz-transform:translateY(10px)}
100%{-moz-transform:translateY(0)}
}
@keyframes FromDownToUp{
0%{opacity:0;
transform:translateY(2000px)}
60%{opacity:1;
transform:translateY(-30px)}
80%{transform:translateY(10px)}
100%{transform:translateY(0)}
}


/******由左到右进场*********/
@-webkit-keyframes FromLeftToRight{
0%{opacity:0;
-webkit-transform:translateX(-2000px)}
60%{opacity:1;
-webkit-transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes FromLeftToRight{
0%{opacity:0;
-moz-transform:translateX(-2000px)}
60%{opacity:1;
-moz-transform:translateX(30px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0)}
}
@keyframes FromLeftToRight{
0%{opacity:0;
transform:translateX(-2000px)}
60%{opacity:1;
transform:translateX(30px)}
80%{transform:translateX(-10px)}
100%{transform:translateX(0)}
}



/******由右到左进场*********/
@-webkit-keyframes FromRightToLeft{
0%{opacity:0;
-webkit-transform:translateX(2000px)}
60%{opacity:1;
-webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes FromRightToLeft{
0%{opacity:0;
-moz-transform:translateX(2000px)}
60%{opacity:1;
-moz-transform:translateX(-30px)}
80%{-moz-transform:translateX(10px)}
100%{-moz-transform:translateX(0)}
}
@keyframes FromRightToLeft{
0%{opacity:0;
transform:translateX(2000px)}
60%{opacity:1;
transform:translateX(-30px)}
80%{transform:translateX(10px)}
100%{transform:translateX(0)}
}


/*旋转*/
@-webkit-keyframes Infinite360Rotate{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes Infinite360Rotate{
    0%{-moz-transform:rotate(0deg);}
    100%{-moz-transform:rotate(360deg);}
}
@keyframes Infinite360Rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}



/*淡入*/
@-webkit-keyframes FadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-moz-keyframes FadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-o-keyframes FadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes FadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}