/*特效样式*/
.magictime {
	-webkit-animation-duration:2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration:2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}
.vanishIn {
	-webkit-animation-name: vanishIn;
	-moz-animation-name: vanishIn;
	-ms-animation-name: vanishIn;
	-o-animation-name: vanishIn;
	animation-name: vanishIn;
}

@-moz-keyframes vanishIn {
0% {
opacity:0;
-moz-transform-origin:50% 50%;
-moz-transform:scale(2, 2);
/*模糊设置*/
-webkit-filter:blur(90px);
}
100% {
opacity:1;
-moz-transform-origin:50% 50%;
-moz-transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}
@-webkit-keyframes vanishIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2, 2);
-webkit-filter:blur(90px);
}
100% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}
@-o-keyframes vanishIn {
0% {
opacity:0;
-o-transform-origin:50% 50%;
-o-transform:scale(2, 2);
-webkit-filter:blur(90px);
}
100% {
opacity:1;
-o-transform-origin:50% 50%;
-o-transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}
@-ms-keyframes vanishIn {
0% {
opacity:0;
filter:alpha(opacity=0);
-ms-transform-origin:50% 50%;
-ms-transform:scale(2, 2);
-webkit-filter:blur(90px);
}
100% {
opacity:1;
filter:alpha(opacity=100);
-ms-transform-origin:50% 50%;
-ms-transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}
@keyframes vanishIn {
0% {
opacity:0;
transform-origin:50% 50%;
transform:scale(2, 2);
-webkit-filter:blur(90px);
}
100% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}




.puffIn {
	-webkit-animation-name: puffIn;
	-moz-animation-name: puffIn;
	-ms-animation-name: puffIn;
	-o-animation-name: puffIn;
	animation-name: puffIn;
}
@-moz-keyframes puffIn {
0% {
opacity:0;
-moz-transform-origin:50% 50%;
-moz-transform:scale(2, 2);
-moz-filter:blur(2px);
}
100% {
opacity:1;
-moz-transform-origin:50% 50%;
-moz-transform:scale(1, 1);
-moz-filter:blur(0px);
}
}
@-webkit-keyframes puffIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2, 2);
-webkit-filter:blur(2px);
}
100% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}
@-o-keyframes puffIn {
0% {
opacity:0;
-o-transform-origin:50% 50%;
-o-transform:scale(2, 2);
-webkit-filter:blur(2px);
}
100% {
opacity:1;
-o-transform-origin:50% 50%;
-o-transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}
@-ms-keyframes puffIn {
0% {
opacity:0;
filter:alpha(opacity=0);
-ms-transform-origin:50% 50%;
-ms-transform:scale(2, 2);
filter:blur(2px);
}
100% {
opacity:1;
filter:alpha(opacity=100);
-ms-transform-origin:50% 50%;
-ms-transform:scale(1, 1);
filter:blur(0px);
}
}
@keyframes puffIn {
0% {
opacity:0;
transform-origin:50% 50%;
transform:scale(2, 2);
filter:blur(2px);
}
100% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1);
filter:blur(0px);
}
}
/*特效样式结束*/
/* CSS Document */
.animatedk_1 {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

.animated_2 {
	-webkit-animation-duration: 2s;
	   -moz-animation-duration: 2s;
	     -o-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated_3 {
	-webkit-animation-duration: 3s;
	   -moz-animation-duration: 3s;
	     -o-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated_4 {
	-webkit-animation-duration: 4s;
	   -moz-animation-duration: 4s;
	     -o-animation-duration: 4s;
	        animation-duration: 4s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated_5 {
	-webkit-animation-duration: 5s;
	   -moz-animation-duration: 5s;
	     -o-animation-duration: 5s;
	        animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated_6 {
	-webkit-animation-duration: 6s;
	   -moz-animation-duration: 6s;
	     -o-animation-duration: 6s;
	        animation-duration: 6s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}



/*以下效果需附加animated属性*/

/* 定义属性：fadeInDown */
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

/* 定义属性：fadeInUp */
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

/* 定义属性：fadeInLeft */
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-100px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-100px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-100px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}


/* 定义属性：fadeInRight */
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(100px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(100px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(100px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	-moz-animation-name: fadeInRight;
	-o-animation-name: fadeInRight;
	animation-name: fadeInRight;
}

/* 定义属性：flipInX */
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}

/* 定义属性：flipOutX */
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flipOutX {
	-webkit-animation-name: flipOutX;
	-webkit-backface-visibility: visible !important;
	-moz-animation-name: flipOutX;
	-moz-backface-visibility: visible !important;
	-o-animation-name: flipOutX;
	-o-backface-visibility: visible !important;
	animation-name: flipOutX;
	backface-visibility: visible !important;
}

/* 定义属性：fadeOutUpBig */
@-webkit-keyframes fadeOutUpBig {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}
}

@-moz-keyframes fadeOutUpBig {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}
}

@-o-keyframes fadeOutUpBig {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}
}

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

.fadeOutUpBig {
	-webkit-animation-name: fadeOutUpBig;
	-moz-animation-name: fadeOutUpBig;
	-o-animation-name: fadeOutUpBig;
	animation-name: fadeOutUpBig;
}



/* 定义属性：从下往上慢慢移动animated_k */
.animated_k{
position:absolute;
left:42%;
animation:myfirst 3s;
-moz-animation:myfirst 3s; /* Firefox */
-webkit-animation:myfirst 3s; /* Safari and Chrome */
-o-animation:myfirst 3s; /* Opera */
}

@keyframes myfirst
{
0%   {top:71.8%; left:42%;}
5%   {top:68.8%; left:42%;}
10%  {top:65.8%; left:42%;}
15%  {top:62.8%; left:42%;}
20%  {top:59.8%; left:42%;}
25%  {top:56.8%; left:42%;}
30%  {top:53.8%; left:42%;}
35%  {top:50.8%; left:42%;}
40%  {top:47.8%; left:42%;}
45%  {top:44.8%; left:42%;}
50%  {top:41.8%; left:42%;}
55%  {top:38.8%; left:42%;}
60%  {top:35.8%; left:42%;}
65%  {top:32.8%; left:42%;}
70%  {top:29.8%; left:42%;}
75%  {top:26.8%; left:42%;}
80%  {top:23.8%; left:42%;}
85%  {top:21.8%; left:42%;}
90%  {top:18.8%; left:42%;}
95%  {top:15.8%; left:42%;}
100% {top:12.8%; left:42%;}

}

@-moz-keyframes myfirst /* Firefox */
{
0%   {top:71.8%; left:42%;}
5%   {top:68.8%; left:42%;}
10%  {top:65.8%; left:42%;}
15%  {top:62.8%; left:42%;}
20%  {top:59.8%; left:42%;}
25%  {top:56.8%; left:42%;}
30%  {top:53.8%; left:42%;}
35%  {top:50.8%; left:42%;}
40%  {top:47.8%; left:42%;}
45%  {top:44.8%; left:42%;}
50%  {top:41.8%; left:42%;}
55%  {top:38.8%; left:42%;}
60%  {top:35.8%; left:42%;}
65%  {top:32.8%; left:42%;}
70%  {top:29.8%; left:42%;}
75%  {top:26.8%; left:42%;}
80%  {top:23.8%; left:42%;}
85%  {top:21.8%; left:42%;}
90%  {top:18.8%; left:42%;}
95%  {top:15.8%; left:42%;}
100% {top:12.8%; left:42%;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {top:71.8%; left:42%;}
5%   {top:68.8%; left:42%;}
10%  {top:65.8%; left:42%;}
15%  {top:62.8%; left:42%;}
20%  {top:59.8%; left:42%;}
25%  {top:56.8%; left:42%;}
30%  {top:53.8%; left:42%;}
35%  {top:50.8%; left:42%;}
40%  {top:47.8%; left:42%;}
45%  {top:44.8%; left:42%;}
50%  {top:41.8%; left:42%;}
55%  {top:38.8%; left:42%;}
60%  {top:35.8%; left:42%;}
65%  {top:32.8%; left:42%;}
70%  {top:29.8%; left:42%;}
75%  {top:26.8%; left:42%;}
80%  {top:23.8%; left:42%;}
85%  {top:21.8%; left:42%;}
90%  {top:18.8%; left:42%;}
95%  {top:15.8%; left:42%;}
100% {top:12.8%; left:42%;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {top:71.8%; left:42%;}
5%   {top:68.8%; left:42%;}
10%  {top:65.8%; left:42%;}
15%  {top:62.8%; left:42%;}
20%  {top:59.8%; left:42%;}
25%  {top:56.8%; left:42%;}
30%  {top:53.8%; left:42%;}
35%  {top:50.8%; left:42%;}
40%  {top:47.8%; left:42%;}
45%  {top:44.8%; left:42%;}
50%  {top:41.8%; left:42%;}
55%  {top:38.8%; left:42%;}
60%  {top:35.8%; left:42%;}
65%  {top:32.8%; left:42%;}
70%  {top:29.8%; left:42%;}
75%  {top:26.8%; left:42%;}
80%  {top:23.8%; left:42%;}
85%  {top:21.8%; left:42%;}
90%  {top:18.8%; left:42%;}
95%  {top:15.8%; left:42%;}
100% {top:12.8%; left:42%;}
}

/* 上下滑动 */
.animated_g{
position:relative;
animation:updown 1s;
-moz-animation:updown 1s; /* Firefox */
-webkit-animation:updown 1s; /* Safari and Chrome */
-o-animation:updown 1s; /* Opera */
}

@keyframes updown
{
0%   {top:0px; bottom:0px;}
25%  {top:25px; bottom:0px;}
50%  {top:0px; bottom:25px;}
75%  {top:25px; bottom:0px;}
100% {top:0px; bottom:25px;}
}

@-moz-keyframes updown /* Firefox */
{
0%   {top:0px; bottom:0px;}
25%  {top:25px; bottom:0px;}
50%  {top:0px; bottom:25px;}
75%  {top:25px; bottom:0px;}
100% {top:0px; bottom:25px;}
}

@-webkit-keyframes updown /* Safari and Chrome */
{
0%   {top:0px; bottom:0px;}
25%  {top:25px; bottom:0px;}
50%  {top:0px; bottom:25px;}
75%  {top:25px; bottom:0px;}
100% {top:0px; bottom:25px;}
}

@-o-keyframes updown /* Opera */
{
0%   {top:0px; bottom:0px;}
25%  {top:25px; bottom:0px;}
50%  {top:0px; bottom:25px;}
75%  {top:25px; bottom:0px;}
100% {top:0px; bottom:25px;}
} 




/* --------------------------------------------------------------旋转---------------------------------------------------------------------------------------------------*/
.deco{
	/*调用两个动画名称：名字为roll和fadeIn 周期为1s 以慢速结束  向前和向后填充模式都被应用*/
	/*-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;*/
	-webkit-animation: roll 3s ease-out both;
	-moz-animation: roll 3s ease-out both;
	-o-animation: roll 3s ease-out both;
	-ms-animation: roll 3s ease-out both;
	animation: roll 3s ease-out both;
}

.decoroll{
	/*调用两个动画名称：名字为roll和fadeIn 周期为1s 以慢速结束  向前和向后填充模式都被应用*/
	/*-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;*/
	-webkit-animation: roll 2s ease-out both;
	-moz-animation: roll 2s ease-out both;
	-o-animation: roll 2s ease-out both;
	-ms-animation: roll 2s ease-out both;
	animation: roll 2s ease-out both;
}

/* --------------------roll距离X500px旋转360度-----------------------------------------------*/
@-webkit-keyframes roll{
	0% {-webkit-transform: translateX(100px) rotate(360deg);}
	100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
	0% {-moz-transform: translateX(100px) rotate(360deg); opacity: 0;}
	100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
	0% {-o-transform: translateX(100px) rotate(360deg); opacity: 0;}
	100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
	0% {-ms-transform: translateX(100px) rotate(360deg); opacity: 0;}
	100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
	0% {transform: translateX(100px) rotate(360deg); opacity: 0;}
	100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}


/* ---------------------fadeinyy和fadeoutyy显示与消失-------------------------------------------------------------*/
.fadeinyy{
	/*名字为moveUp 周期为1s 慢速开始和结束的过渡效果  向前和向后填充模式都被应用*/
	-webkit-animation: fadeIn 5s ease-in-out both;
	-moz-animation: fadeIn 5s ease-in-out both;
	-o-animation: fadeIn 5s ease-in-out both;
	-ms-animation: fadeIn 5s ease-in-out both;
	animation: fadeIn 5s ease-in-out both;
}

@-webkit-keyframes fadeIn{
	0%, 100%{opacity: 0;}
	50% {opacity: 1;}
}
@-moz-keyframes fadeIn{
	0%, 100%{opacity: 0;}
	50% {opacity: 1;}
}
@-o-keyframes fadeIn{
	0%, 100%{opacity: 0;}
	50% {opacity: 1;}
}
@-ms-keyframes fadeIn{
	0%, 100%{opacity: 0;}
	50% {opacity: 1;}
}
@keyframes fadeIn{
	0%, 100%{opacity: 0;}
	50% {opacity: 1;}
}


.fadeIn1{
	-webkit-animation: fadeIn1 3s linear both;
	-moz-animation: fadeIn1 3s linear both;
	-o-animation: fadeIn1 3s linear both;
	-ms-animation: fadeIn1 3s linear both;
	animation: fadeIn1 3s linear both;
}

@-webkit-keyframes fadeIn1{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn1{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes fadeIn1{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes fadeIn1{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn1{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* ----------------scaleDown在原地来回放大-----------------------------------------------------------------*/
.deco1{
	-webkit-animation: scaleDown 2s ease-in-out both;
	-moz-animation: scaleDown 2s ease-in-out both;
	-o-animation: scaleDown 2s ease-in-out both;
	-ms-animation: scaleDown 2s ease-in-out both;
	animation: scaleDown 2s ease-in-out both;
}
@-webkit-keyframes scaleDown{
	0% {-webkit-transform: scale(1);}
	25% {-webkit-transform: scale(0.5);}
	50% {-webkit-transform: scale(1);}
	75% {-webkit-transform: scale(0.5);}
	100% {-webkit-transform: scale(1);}
}
@-moz-keyframes scaleDown{
	0% {-moz-transform: scale(1);}
	25% {-moz-transform: scale(0.5);}
	50% {-moz-transform: scale(1);}
	75% {-moz-transform: scale(0.5);}
	100% {-moz-transform: scale(1);}
}
@-o-keyframes scaleDown{
	0% {-o-transform: scale(1);}
	25% {-o-transform: scale(0.5);}
	50% {-o-transform: scale(1);}
	75% {-o-transform: scale(0.5);}
	100% {-o-transform: scale(1);}
}
@-ms-keyframes scaleDown{
	0% {-ms-transform: scale(1);}
	25% {-ms-transform: scale(0.5);}
	50% {-ms-transform: scale(1);}
	75% {-ms-transform: scale(0.5);}
	100% {-ms-transform: scale(1);}
}
@keyframes scaleDown{
	0% {transform: scale(1);}
	25% {transform: scale(0.5);}
	50% {transform: scale(1);}
	75% {transform: scale(0.5);}
	100% {transform: scale(1);}
}
 
/* ----------------rotate原地360度旋转-----------------------------------------------------------------*/
.deco2{
	-webkit-animation: rotate 2s ease-in-out both;
	-moz-animation: rotate 2s ease-in-out both;
	-o-animation: rotate 2s ease-in-out both;
	-ms-animation: rotate 2s ease-in-out both;
	animation: rotate 2s ease-in-out both;
} 

@-webkit-keyframes rotate {
100% {
	/*rotate(360deg)旋转360度*/
-webkit-transform: rotate(360deg)
}
}

@keyframes rotate {
 100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}

/* ----------------rotate原地360度旋转-----------------------------------------------------------------*/
.deco3{
	-webkit-animation: bounce 2s ease-in-out both;
	-moz-animation: bounce 2s ease-in-out both;
	-o-animation: bounce 2s ease-in-out both;
	-ms-animation: bounce 2s ease-in-out both;
	animation: bounce 2s ease-in-out both;
} 
/*加载到0和100%的时候原本样不变加载到50%扩大一倍*/
@-webkit-keyframes bounce {
 0%{
-webkit-transform: scale(0.0)
}
 100%  {
-webkit-transform: scale(1.0)
}
}
 @keyframes bounce {
 0% {
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
}
100%  {
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
}
}
/*-------fadeInDownBig---------*/

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

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
	
	100% {
		-webkit-transform: translateY(-200px);
		-webkit-transform: translateY(200px);
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@-moz-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
	
	100% {
		-webkit-transform: translateY(-200px);
		-webkit-transform: translateY(200px);
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@-o-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}
	
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
	
	100% {
		-webkit-transform: translateY(-200px);
		-webkit-transform: translateY(200px);
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeInDownBig {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
	
	100% {
		-webkit-transform: translateY(-200px);
		-webkit-transform: translateY(200px);
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

.fadeInDownBig {
	-webkit-animation-name: fadeInDownBig;
	-moz-animation-name: fadeInDownBig;
	-o-animation-name: fadeInDownBig;
	animation-name: fadeInDownBig;
}



/*围绕X轴前后3D摆动 以 弹；筋斗的方式显示*/
/*围绕X轴前后3D摆动 以 弹；筋斗的方式显示*/
@-webkit-keyframes flipInrotateX {
    0% {
		/*  perspective(400px) 为 3D 转换元素定义透视视图。  rotateX(90deg) 定义沿着 X 轴的 3D 旋转。*/
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInrotateX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInrotateX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInrotateX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInrotateX {
	/*backface-visibility 属性定义当元素不面向屏幕时是否可见。visible 背面是可见的。   !important不重要的*/
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInrotateX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInrotateX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInrotateX;
	backface-visibility: visible !important;
	animation-name: flipInrotateX;
}

/*围绕X轴前后3D摆动 以 弹；筋斗的方式隐藏*/
@-webkit-keyframes hideflipOutX {
    0% {
        -moz-transform: perspective(800px) rotateX(0deg);
        opacity: 0;
    }
	40% {
        -webkit-transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }
	70% {
        -webkit-transform: perspective(800px) rotateX(180deg);
        opacity: 0;
    }
	100% {
        -webkit-transform: perspective(800px) rotateX(360deg);
        opacity: 1;
    }
}

@-moz-keyframes hideflipOutX {
    0% {
        -moz-transform: perspective(800px) rotateX(0deg);
        opacity: 0;
    }
	40% {
        -webkit-transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }
	70% {
        -webkit-transform: perspective(800px) rotateX(180deg);
        opacity: 0;
    }
	100% {
        -webkit-transform: perspective(800px) rotateX(360deg);
        opacity: 1;
    }
}

@-o-keyframes hideflipOutX {
    0% {
        -moz-transform: perspective(800px) rotateX(0deg);
        opacity: 0;
    }
	40% {
        -webkit-transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }
	70% {
        -webkit-transform: perspective(800px) rotateX(180deg);
        opacity: 0;
    }
	100% {
        -webkit-transform: perspective(800px) rotateX(360deg);
        opacity: 1;
    }
}

@keyframes hideflipOutX {
    0% {
        -moz-transform: perspective(800px) rotateX(0deg);
        opacity: 0;
    }
	40% {
        -webkit-transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }
	70% {
        -webkit-transform: perspective(800px) rotateX(180deg);
        opacity: 0;
    }
	100% {
        -webkit-transform: perspective(800px) rotateX(360deg);
        opacity: 1;
    }
}

.hideflipOutX {
	-webkit-animation-name: hideflipOutX;
	-webkit-backface-visibility: visible !important;
	-moz-animation-name: hideflipOutX;
	-moz-backface-visibility: visible !important;
	-o-animation-name: hideflipOutX;
	-o-backface-visibility: visible !important;
	animation-name: hideflipOutX;
	backface-visibility: visible !important;
}



















/* 以下效果不需附加animated属性，直接定义属性即可 */

/* 定义属性：bg-form */
.bg-form{-webkit-animation:bgForm 6s infinite linear; display:block; position:absolute;}
@-webkit-keyframes bgForm{
	0%{
		-webkit-transform:translate(0,0) scale(1,1);
	}
	25%{
		-webkit-transform:translate(-60px,-60px) scale(1.2,1.2);
	}
	50%{
		-webkit-transform:translate(-30px,60px) scale(1.4,1.4);
	}
	75%{
		-webkit-transform:translate(100px,100px) scale(1.2,1.2);
	}
	100%{
		-webkit-transform:translate(0,0) scale(1,1);
	}
}

/* 定义属性：slide-left */
.slide-left{opacity:0;-webkit-animation:slideLeft .9s ease-out forwards}
@-webkit-keyframes slideLeft{
	0%{
		opacity:0;
		-webkit-transform:translate(20px,0);
	}
	100%{
		opacity:1;
		-webkit-transform:translate(0,0);
	}
}

/* 定义属性：slide-up */
.slide-up{opacity:0;-webkit-animation:slideUp .9s ease-out forwards}
@-webkit-keyframes slideUp{
	0%{
		opacity:0;
		-webkit-transform:translate(0,20px);
	}
	100%{
		opacity:1;
		-webkit-transform:translate(0,0);
	}
}

/* 定义属性：slide-upslow */
.slide-upslow{opacity:0;-webkit-animation:slideUpslow .9s ease-out forwards}
@-webkit-keyframes slideUpslow{
	0%{
		opacity:0;
		-webkit-transform:translate(0,100px);
	}
	100%{
		opacity:1;
		-webkit-transform:translate(0,0);
	}
}

/* 定义属性：slide-down */
.slide-down{opacity:0;-webkit-animation:slideDown .9s ease-out forwards}
@-webkit-keyframes slideDown{
	0%{
		opacity:0;
		-webkit-transform:translate(0,-20px);
	}
	100%{
		opacity:1;
		-webkit-transform:translate(0,0);
	}
}

/* 定义属性：biger */
.biger{-webkit-transform:scale(1,1);-webkit-animation:biger .7s linear alternate infinite;-webkit-animation-delay:.9s;}
@-webkit-keyframes biger{
	0%{
		-webkit-transform:scale(1,1);
	}
	100%{
		-webkit-transform:scale(1.3,1.3);
	}
}

/* 定义属性：bg-show */
.bg-show{opacity:0;-webkit-animation:bgShow .6s linear forwards}
@-webkit-keyframes bgShow{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

/* 定义属性：fallDown */
.fallDown{-webkit-transform:translate(0,-54px);-webkit-animation:bgJumpDown .5s ease-in forwards;}
@-webkit-keyframes bgJumpDown{
	0%{
		-webkit-transform:translate(0,-54px);
	}
	100%{
		-webkit-transform:translate(0,0);
	}
}