/*特效样式*/

.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);
}
}





/*特效样式结束*/
/* CSS Document */


.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属性*/



/*原地360旋转*/

.roll360{
	/*调用两个动画名称：名字为roll和fadeIn 周期为1s 以慢速结束  向前和向后填充模式都被应用*/
	/*-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both; infinite*/
	-webkit-animation: roll360 3s linear   both;
	-moz-animation: roll360 3s linear  both;
	-o-animation: roll360 3s linear  both;
	-ms-animation: roll360 3s linear  both;
	animation: roll360 3s linear  both;
}
@-webkit-keyframes roll360{
	0% {-webkit-transform:  rotate(45deg); opacity:0;}
	100% {-webkit-transform: rotate(0deg); opacity:1;}
}
@-moz-keyframes roll360{
	0% {-moz-transform: rotate(45deg); opacity:0;}
	100% {-moz-transform:  rotate(0deg); opacity:1;}
}
@-o-keyframes roll360{
	0% {-o-transform:  rotate(45deg); opacity:0;}
	100% {-o-transform: rotate(0deg); opacity:0;}
}
@-ms-keyframes roll360{
	0% {-ms-transform: rotate(45deg); opacity:0;}
	100% {-ms-transform: rotate(0deg); opacity:1;}
}
@keyframes roll360{
	0% {transform: rotate(45deg); opacity:0;}
	100% {transform:  rotate(0deg); opacity:1;}
}


/*原地从小到大从无到有*/

.scaleopacity{
	-webkit-animation: scaleopacity 2s ease-in-out both;
	-moz-animation: scaleopacity 2s ease-in-out both;
	-o-animation: scaleopacity 2s ease-in-out both;
	-ms-animation: scaleopacity 2s ease-in-out both;
	animation: scaleopacity 2s ease-in-out both;
}
@-webkit-keyframes scaleopacity{
	0% {-webkit-transform: scale(0); opacity:0;}
	100% {-webkit-transform: scale(1); opacity:1;}
}
@-moz-keyframes scaleopacity{
	0% {-moz-transform: scale(0); opacity:0;}
	100% {-moz-transform: scale(1); opacity:1;}
}
@-o-keyframes scaleopacity{
	0% {-o-transform: scale(0); opacity:0;}
	100% {-o-transform:scale(1); opacity:1;}
}
@-ms-keyframes scaleopacity{
	0% {-ms-transform: scale(0); opacity:0;}
	100% {-ms-transform:scale(1); opacity:1;}
}
@keyframes scaleopacity{
	0% {transform: scale(0); opacity:0;}
	100% {transform: scale(1); opacity:1;}
}
 

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

@-webkit-keyframes opacityIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes opacityIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes opacityIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes opacityIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes opacityIn{
	0% {opacity: 0;}
	100% {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;}
}
/*左右移出*/
/* 定义属性：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: 1;
		-webkit-transform: translateX(100px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

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

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

@keyframes fadeInRight {
	0% {
		opacity: 1;
		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;
}