/* CSS Document */
/*围绕Y轴上下根据是动画周期移动 + 围绕X左移动的css3特效*/
/*定义动画完成一个周期需要的时间，both像前向后填充模式都被相应*/
.animated {
	-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;
}



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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fadeInLeft {
	-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;
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-delay:5s;
	-moz-animation-delay: 5s;
	-o-animation-delay: 5s;
	animation-delay:5s;
}