/* CSS Document */
/*围绕Y轴上下根据是动画周期移动 + 围绕X左移动的css3特效*/
/*定义动画完成一个周期需要的时间，both像前向后填充模式都被相应*/
.animated_a {
	-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;
}
 
@-webkit-keyframes fadeInDown {
	0%,100% {
		/*opacity透明度  transform该属性允许我们对元素进行旋转、缩放、移动或倾斜
			translateY(-20px)定义转换，只是用 Y 轴的值。
		 */
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	
	50% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0%,100% {
		/*opacity透明度  transform该属性允许我们对元素进行旋转、缩放、移动或倾斜
			translateY(-20px)定义转换，只是用 Y 轴的值。
		 */
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	
	50% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0%,100% {
		/*opacity透明度  transform该属性允许我们对元素进行旋转、缩放、移动或倾斜
			translateY(-20px)定义转换，只是用 Y 轴的值。
		 */
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	
	50% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0%,100% {
		/*opacity透明度  transform该属性允许我们对元素进行旋转、缩放、移动或倾斜
			translateY(-20px)定义转换，只是用 Y 轴的值。
		 */
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	
	50% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

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

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

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

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

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

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

@-webkit-keyframes fadeInUp1 {
	0%,100% {
		opacity: 0;
		transform: translateY(20px);
	}
	
	50% {
		opacity: 1;
		transform: translateY(0);
	}
}

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

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

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

.fadeInUp1 {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: 9s;
	-moz-animation-delay: 9s;
	-o-animation-delay: 9s;
	animation-delay: 9s;
}
 
@-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: 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;
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-delay:14s;
	-moz-animation-delay: 14s;
	-o-animation-delay: 14s;
	animation-delay: 14s;
}