/*动画效果*/

/*从上到下*/
@keyframes fadeUp{
    0%{ opacity:0; transform:translateY(-20%);}
    100%{ opacity:1; transform:translateY(0);}
}
@-webkit-keyframes fadeUp{
    0%{ -webkit-opacity:0; -webkit-transform:translateY(-20%);}
    100%{ -webkit-opacity:1; -webkit-transform:translateY(0);}
}
@-moz-keyframes fadeUp{
    0%{ -moz-opacity:0; -moz-transform:translateY(-20%);}
    100%{ -moz-opacity:1; -moz-transform:translateY(0);}
}
/*从下到上*/
@keyframes fadeDown{
    0%{ opacity:0; transform:translateY(20%);}
    100%{ opacity:1; transform:translateY(0);}
}
@-webkit-keyframes fadeDown{
    0%{ -webkit-opacity:0; -webkit-transform:translateY(20%);}
    100%{ -webkit-opacity:1; -webkit-transform:translateY(0);}
}
@-moz-keyframes fadeDown{
    0%{ -moz-opacity:0; -moz-transform:translateY(20%);}
    100%{ -moz-opacity:1; -moz-transform:translateY(0);}
}
/*从左到右*/
@-webkit-keyframes slidL{
0%{-webkit-transform:translateX(-150px);-webkit-opacity:0;}
100%{-webkit-transform:translateX(0px);-webkit-opacity:1;}
}
@-moz-keyframes slidL{
0%{-moz-transform:translateX(-150px);-moz-opacity:0;}
100%{-moz-transform:translateX(0px);-moz-opacity:1;}
}
@keyframes slidL{
0%{transform:translateX(-150px);opacity:0;}
100%{transform:translateX(0px);opacity:1;}
}
/*从右到左*/
@-webkit-keyframes slidR{
0%{-webkit-transform:translateX(150px);-webkit-opacity:0;}
100%{-webkit-transform:translateX(0px);-webkit-opacity:1;}
}
@-moz-keyframes slidR{
0%{-moz-transform:translateX(150px);-moz-opacity:0;}
100%{-moz-transform:translateX(0px);-moz-opacity:1;}
}
@keyframes slidR{
0%{transform:translateX(150px);opacity:0;}
100%{transform:translateX(0px);opacity:1;}
}
/*从中心点渐显放大*/
@-webkit-keyframes fadeCIn{
	0%{-webkit-opacity:0;  -webkit-transform-origin:center; -webkit-transform:scale(0.1);}
	100%{-webkit-opacity:1; -webkit-transform-origin:center; -webkit-transform:scale(1);}
}
@-moz-keyframes fadeCIn{
	0%{-moz-opacity:0; -moz-transform-origin:center; -moz-transform:scale(0.1);}
	100%{-moz-opacity:1; -moz-transform-origin:center; -moz-transform:scale(1);}
}
@keyframes fadeCIn{
	0%{opacity:0; transform-origin:center; transform:scale(0.1); }
	100%{opacity:1; transform-origin:center; transform:scale(1); }
}
/*从右向左滚动出现*/
@-webkit-keyframes scrollR_L{
	0%{ -webkit-opacity:0; -webkit-transform:translateX(100px) rotate(720deg);}
	100%{ -webkit-opacity:1; -webkit-transform:translateX(0px) rotate(0deg);}
	}
@-moz-keyframes scrollR_L{
	0%{ -moz-opacity:0; -moz-transform:translateX(100px) rotate(720deg);;}
	100%{ -moz-opacity:1; -moz-transform:translateX(0px) rotate(0deg);}
	}
@keyframes scrollR_L{
	0%{ opacity:0; transform:translateX(100px) rotate(720deg);}
	100%{ opacity:1; transform:translateX(0px) rotate(0deg);}
	}
/** 渐显 */
@-webkit-keyframes fdIn{
	0%{ -webkit-opacity:0;}
	100%{-webkit-opacity:1;}
	}
@-moz-keyframes fdIn{
	0%{ -moz-opacity:0;}
	100%{-moz-opacity:1;}
	}
@keyframes fdIn{
	0%{ opacity:0; }
	100%{ opacity:1; }
	}

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


/* 首页动画 */

.fadeUp{ visibility: visible; animation:fadeUp both 0.3s ease-out; -webkit-animation:fadeUp both 0.3s ease-out; -moz-animation:fadeUp both 0.3s ease-out;}