@charset "utf-8";
/* CSS Document */

/*动画效果*/

/*无到有*/
@-webkit-keyframes  fadein{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fadein{
    0% {opacity:0; }
    100% {opacity:1;}
}


/*下到上*/
@-webkit-keyframes  up{
    0% {opacity:0; -webkit-transform: translateY(45px);}
    100% {opacity:1; -webkit-transform: translateY(0px);}
}
@keyframes up{
    0% {opacity:0; transform: translateY(45px);}
    100% {opacity:1; transform: translateY(0px);}
}

/*上到下*/
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown
}
/*左到右*/
@-webkit-keyframes  sliderL{
    0% {opacity:0; -webkit-transform: translatex(-50px);}
    100% {opacity:1; -webkit-transform: translatex(0px);}
}
@keyframes sliderL{
    0% {opacity:0; transform: translatex(-50px);}
    100% {opacity:1; transform: translatex(0px);}
}


/*右到左*/
@-webkit-keyframes  sliderR{
    0% {opacity:0; -webkit-transform: translatex(0100px);}
    100% {opacity:1; -webkit-transform: translatex(0px);}
}
@keyframes sliderR{
    0% {opacity:0; transform: translatex(0100px);}
    100% {opacity:1; transform: translatex(0px);}
}

/* 放大 */
@-webkit-keyframes scale{
    0% {-webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0;}
    100% {-webkit-transform: scale(1); transform: scale(1);  opacity: 1;}
}

@keyframes scale{
    0% {-webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0;}
    100% {-webkit-transform: scale(1); transform: scale(1);  opacity: 1;}
}


 /* 呼吸灯 */
@-webkit-keyframes opac{
    0% { opacity:0.2;}
    50% { opacity:1;}
    100% { opacity:0.2;}
}
@keyframes opac{
    0% { opacity:0.2;}
    50% { opacity:1;}
    100% { opacity:0.2;}
}

/* 旋转 */
@-webkit-keyframes rotate{
    0% {-webkit-transform: rotate(0deg); opacity:1;}
    100% {-webkit-transform: rotate(360deg); opacity:1;}
}
@keyframes rotate{
    0% {-webkit-transform: rotate(0deg); opacity:1;}
    100% {-webkit-transform: rotate(360deg); opacity:1;}
}


/*左到B右*/
@-webkit-keyframes  sliderL2{
    0% {opacity:1; -webkit-transform: translatex(0);}
    100% {opacity:1; -webkit-transform: translatex(30px);}
}
@keyframes sliderL2{
    0% {opacity:1; transform: translatex(0px);}
    100% {opacity:1; transform: translatex(30px);}
}


/*右到左B*/
@-webkit-keyframes  sliderR2{
    0% {opacity:1; -webkit-transform: translatex(0px);}
    100% {opacity:1; -webkit-transform: translatex(-50px);}
}
@keyframes sliderR2{
    0% {opacity:1; transform: translatex(0px);}
    100% {opacity:1; transform: translatex(-50px);}
}