/**设定动画**/
/**transform设定动画,animation执行的动画，和jquery配合使用最好**/
/**div从左往右移动**/
@-webkit-keyframes fadeIn{
	0%{ opacity: 0;-webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); transform: translateX(-200px);}
	100%{ opacity: 1; -webkit-transform:translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px);}
}
@-moz-keyframes fadeIn{
	0%{ opacity: 0;-webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); transform: translateX(-200px);}
	100%{ opacity: 1; -webkit-transform:translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px);}
}
@-ms-keyframes fadeIn{
	0%{ opacity: 0;-webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); transform: translateX(-200px);}
	100%{ opacity: 1; -webkit-transform:translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px);}
}
@keyframes fadeIn{
	0%{ opacity: 0;-webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); transform: translateX(-200px);}
	100%{ opacity: 1; -webkit-transform:translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px);}
}

@-webkit-keyframes slideDown{
	0%{ opacity: 0; 
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
	}
	100%{opacity: 1;
	-webkit-transform: translate(0px);
	-moz-transform: translate(0px);
	transform: translate(0px);
	}
}
@-ms-keyframes slideDown{
	0%{ opacity: 0; 
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
	}
	100%{opacity: 1;
	-webkit-transform: translate(0px);
	-moz-transform: translate(0px);
	transform: translate(0px);
	}
}
@-moz-keyframes slideDown{
   0%{ opacity: 0; 
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
	}
	100%{opacity: 1;
	-webkit-transform: translate(0px);
	-moz-transform: translate(0px);
	transform: translate(0px);
	}
}
@keyframes slideDown{
	0%{ opacity: 0; 
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform:translateY(20px);
	}
	100%{opacity: 1;
	-webkit-transform: translate(0px);
	-moz-transform: translate(0px);
	transform: translate(0px);
	}
}
@-webkit-keyframes borLtobg{
	0%{ opacity: 0; clip:rect(0 53px 106px 0);}
	100%{ opacity: 1; clip:rect(0 53px 0 0);}
}
@-moz-keyframes bortobg{
	0%{ opacity: 0; clip:rect(0 53px 106px 0);}
	100%{ opacity: 1; clip:rect(0 53px 0 0);}
}
@-ms-keyframes bortobg{
	0%{ opacity: 0; clip:rect(0 53px 106px 0);}
	100%{ opacity: 1; clip:rect(0 53px 0 0);}
}
@keyframes bortobg{
	0%{ opacity: 0;  clip:rect(0 53px 106px 0);}
	100%{ opacity: 1; clip:rect(0 53px 0 0);}
}
@-webkit-keyframes rotateTurn{
  0%{ opacity: 0; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);transform: rotateY(0deg);}
  50%{ opacity: .5; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}	
  100%{ opacity: 1; -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}		
}
@-moz-keyframes rotateTurn{
  0%{ opacity: 0; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);transform: rotateY(0deg);}
  50%{ opacity: .5; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}	
  100%{ opacity: 1; -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}		
}
@-ms-keyframes rotateTurn{
  0%{ opacity: 0; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);transform: rotateY(0deg);}
  50%{ opacity: .5; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}	
  100%{ opacity: 1; -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}		
}
@keyframes rotateTurn{
  0%{ opacity: 0; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);transform: rotateY(0deg);}
  50%{ opacity: .5; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}	
  100%{ opacity: 1; -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}		
}
@-webkit-keyframes opacityScale{
	0%{ opacity: 0; -webkit-transform: scale(0) translateY(200px); -moz-transform: scale(0) translateY(200px); -ms-transform: scale(0) translateY(200px); transform: scale(0) translateY(200px);}
	100%{opacity: 1;-webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px);}
}
@-ms-keyframes opacityScale{
	0%{ opacity: 0; -webkit-transform: scale(0) translateY(200px); -moz-transform: scale(0) translateY(200px); -ms-transform: scale(0) translateY(200px); transform: scale(0) translateY(200px);}
	100%{opacity: 1;-webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px);}
}
@-moz-keyframes opacityScale{
	0%{ opacity: 0; -webkit-transform: scale(0) translateY(200px); -moz-transform: scale(0) translateY(200px); -ms-transform: scale(0) translateY(200px); transform: scale(0) translateY(200px);}
	100%{opacity: 1;-webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px);}
}
@keyframes opacityScale{
	0%{ opacity: 0; -webkit-transform: scale(0) translateY(200px); -moz-transform: scale(0) translateY(200px); -ms-transform: scale(0) translateY(200px); transform: scale(0) translateY(200px);}
	100%{opacity: 1;-webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px);}
}





/**动画调用**/
.fadeIn{
	-webkit-animation: fadeIn .3s ease-in-out both;
	-moz-animation: fadeIn .3s ease-in-out both;
	-ms-animation: fadeIn .3s ease-in-out both;
	-o-animation: fadeIn .3s ease-in-out both;
	animation: fadeIn .3s ease-in-out both;
}
.opacityScale{
	-webkit-animation: opacityScale .3s ease-in-out both;
	-moz-animation: opacityScale .3s ease-in-out both;
	-ms-animation: opacityScale .3s ease-in-out both;
	-o-animation: opacityScale .3s ease-in-out both;
	animation: opacityScale .3s ease-in-out both;
}
.rotateTurn{
	-webkit-animation: rotateTurn .3s ease-in-out both;
	-moz-animation: rotateTurn .3s ease-in-out both;
	-ms-animation: rotateTurn .3s ease-in-out both;
	-o-animation: rotateTurn .3s ease-in-out both;
	animation: rotateTurn .3s ease-in-out both;
}
.borLtobg{
	-webkit-animation: borLtobg .3s ease-in-out both;
	-moz-animation: borLtobg .3s ease-in-out both;
	-ms-animation: borLtobg .3s ease-in-out both;
	-o-animation: borLtobg .3s ease-in-out both;
	animation: borLtobg .3s ease-in-out both;
}
.bannerdown
{
	-webkit-animation: slideDown .5s ease-in-out both;
	-moz-animation: slideDown .5s ease-in-out both;
	-ms-animation: slideDown .5s ease-in-out both;
	-o-animation: slideDown .5s ease-in-out both;
	animation: slideDown .5s ease-in-out both;
}
.columndowm
{
	-webkit-animation: slideDown .5s ease-in-out both;
	-moz-animation: slideDown .5s ease-in-out both;
	-ms-animation: slideDown .5s ease-in-out both;
	-o-animation: slideDown .5s ease-in-out both;
	animation: slideDown .5s ease-in-out both;
}