/*屏幕切换效果*/
#s1.active{
	-webkit-animation: aniSec1a 0ms ease 0ms both;
	-moz-animation: aniSec1a 0ms ease 0ms both;
	-ms-animation: aniSec1a 0ms ease 0ms both;
	-o-animation: aniSec1a 0ms ease 0ms both;
	animation: aniSec1a 0ms ease 0ms both;
}
#s2.active ,#s3.active ,#s4.active,#s5.active {
	-webkit-animation: 	s5Appear 700ms ease 0ms both;
	-moz-animation: 	s5Appear 700ms ease 0ms both;
	-ms-animation: 		s5Appear 700ms ease 0ms both;
	-o-animation: 		s5Appear 700ms ease 0ms both;
	animation: 			s5Appear 700ms ease 0ms both;
}
#s6.active,#s7.active,#s8.active,#s9.active,#s10.active{
	-webkit-animation: 	s5Appear 700ms ease 0ms both;
	-moz-animation: 	s5Appear 700ms ease 0ms both;
	-ms-animation: 		s5Appear 700ms ease 0ms both;
	-o-animation: 		s5Appear 700ms ease 0ms both;
	animation: 			s5Appear 700ms ease 0ms both;
}
#s1.disappear,#s2.disappear,#s3.disappear,#s4.disappear,#s5.disappear,#s6.disappear,#s7.disappear,#s8.disappear,#s9.disappear,#s10.disappear {
	-webkit-animation: 	s5Disappear 700ms ease 0ms both;
	-moz-animation: 	s5Disappear 700ms ease 0ms both;
	-ms-animation: 		s5Disappear 700ms ease 0ms both;
	-o-animation: 		s5Disappear 700ms ease 0ms both;
	animation: 			s5Disappear 700ms ease 0ms both;
}
/*"试试鼠标滚动"文字出现*/
.active .roll {
	-webkit-animation: 	appearRoll 0ms ease 280ms both;
	-moz-animation: 	appearRoll 0ms ease 300ms both;
	-ms-animation: 		appearRoll 0ms ease 300ms both;
	-o-animation: 		appearRoll 0ms ease 300ms both;
	animation: 			appearRoll 0ms ease 300ms both;
}

/*试试向下按钮-出现效果*/
.active #rollImg1 { 
	-webkit-animation: 	bounce 3s infinite ease-in-out;
	-moz-animation: 	bounce 3s infinite ease-in-out;
	-ms-animation: 		bounce 3s infinite ease-in-out;
	-o-animation: 		bounce 3s infinite ease-in-out;
	animation: 			bounce 3s infinite ease-in-out;
}
.active #rollImg2 { 
	-webkit-animation: 	bounce 3s ease-in-out 1.5s infinite;
	-moz-animation: 	bounce 3s ease-in-out 1.5s infinite;
	-ms-animation: 		bounce 3s ease-in-out 1.5s infinite;
	-o-animation: 		bounce 3s ease-in-out 1.5s infinite;
	animation: 			bounce 3s ease-in-out 1.5s infinite;
}
/*===========================================================*/
/*屏幕切换效果*/	
@keyframes aniSec1a{
	0%	{ opacity: 0; 	transform: scale(4,4);}
	100%{ opacity: 1; transform: scale(1,1);}
}@keyframes aniSec1b{
	0%	{ opacity: 1; transform: scale(1,1);}
	100%{ opacity: 0; 	transform: scale(0.3,0.3);}
}

@-ms-keyframes aniSec1a{
	0%	{ opacity: 0; 	-ms-transform: scale(4,4);}
	100%{ opacity: 1; -ms-transform: scale(1,1);}
}@-ms-keyframes aniSec1b{
	0%	{ opacity: 1; -ms-transform: scale(1,1);}
	100%{ opacity: 0; 	-ms-transform: scale(0.3,0.3);}
}

/*Firefox*/
@-moz-keyframes aniSec1a{
	0%	{ opacity: 0; 	-moz-transform: scale(4,4);}
	100%{ opacity: 1; -moz-transform: scale(1,1);}
}@-moz-keyframes aniSec1b{
	0%	{ opacity: 1; -moz-transform: scale(1,1);}
	100%{ opacity: 0; 	-moz-transform: scale(0.3,0.3);}
}

/*chrome safari*/
@-webkit-keyframes aniSec1a{
	0%	{ opacity: 0; 	-webkit-transform: scale(4,4);}
	100%{ opacity: 1; -webkit-transform: scale(1,1);}
}@-webkit-keyframes aniSec1b{
	0%	{ opacity: 1; -webkit-transform: scale(1,1);}
	100%{ opacity: 0;	-webkit-transform: scale(0.3,0.3);}
}	

/*oprea*/
@-o-keyframes aniSec1a{
	0%	{ opacity: 0; 	-o-transform: scale(4,4);}
	100%{ opacity: 1; -o-transform: scale(1,1);}
}@-o-keyframes aniSec1b{
	0%	{ opacity: 1; -o-transform: scale(1,1);}
	100%{ opacity: 0; 	-o-transform: scale(2,2);}
}	
		
/*===========================================================*/
/*试试向下按钮-出现效果*/
@-webkit-keyframes bounce {
	0%, 100% { 	-webkit-transform: scale(0.0) }
	50% { 		-webkit-transform: scale(1.0) }
}@-ms-keyframes bounce {
	0%, 100% { 	-ms-transform: scale(0.0) }
	50% { 		-ms-transform: scale(1.0) }
}@-o-keyframes bounce {
	0%, 100% { 	-o-transform: scale(0.0) }
	50% { 		-o-transform: scale(1.0) }
}@-moz-keyframes bounce {
	0%, 100% { 	-moz-transform: scale(0.0) }
	50% { 		-moz-transform: scale(1.0) }
}@keyframes bounce {
	0%, 100% { 	transform: scale(0.0) }
	50% { 		transform: scale(1.0) }
}


/*"试试鼠标滚动"文字出现*/
@-webkit-keyframes appearRoll {
	0%	{ opacity: 0;}
	100%{ opacity: 1;}
}@-moz-keyframes appearRoll {
	0%	{ opacity: 0;}
	100%{ opacity: 1;}
}@-ms-keyframes appearRoll {
	0%	{ opacity: 0;}
	100%{ opacity: 1;}
}@-o-keyframes appearRoll {
	0%	{ opacity: 0;}
	100%{ opacity: 1;}
}@keyframes appearRoll {
	0%	{ opacity: 0;}
	100%{ opacity: 1;}
}

/*第一个-从右往左-文字出现*/
@-webkit-keyframes appearTitleRL {
	0%	{ opacity: 0; -webkit-transform: translateX(60px);}
	100%{ opacity: 1; -webkit-transform: translateX(0);}
}@-moz-keyframes appearTitleRL {
	0%	{ opacity: 0; -moz-transform: translateX(60px);}
	100%{ opacity: 1; -moz-transform: translateX(0);}
}@-ms-keyframes appearTitleRL {
	0%	{ opacity: 0; -ms-transform: translateX(60px);}
	100%{ opacity: 1; -ms-transform: translateX(0);}
}@-o-keyframes appearTitleRL {
	0%	{ opacity: 0; -o-transform: translateX(60px);}
	100%{ opacity: 1; -o-transform: translateX(0);}
}@keyframes appearTitleRL {
	0%	{ opacity: 0; transform: translateX(60px);}
	100%{ opacity: 1; transform: translateX(0);}
}
/*第一个-从左往右-文字出现*/
@-webkit-keyframes appearTitleLR {
	0%	{ opacity: 0; -webkit-transform: translateX(-60px);}
	100%{ opacity: 1; -webkit-transform: translateX(0);}
}@-moz-keyframes appearTitleLR {
	0%	{ opacity: 0; -moz-transform: translateX(-60px);}
	100%{ opacity: 1; -moz-transform: translateX(0);}
}@-ms-keyframes appearTitleLR {
	0%	{ opacity: 0; -ms-transform: translateX(-60px);}
	100%{ opacity: 1; -ms-transform: translateX(0);}
}@-o-keyframes appearTitleLR {
	0%	{ opacity: 0; -o-transform: translateX(-60px);}
	100%{ opacity: 1; -o-transform: translateX(0);}
}@keyframes appearTitleLR {
	0%	{ opacity: 0; transform: translateX(-60px);}
	100%{ opacity: 1; transform: translateX(0);}
}

/*section6-出现动画*/
@-webkit-keyframes s5Appear{
	0%	{ opacity: 1; -webkit-transform: translateY(100%);}
	100%{ opacity: 1; -webkit-transform: translateY(0%);}
}@-moz-keyframes s5Appear{
	0%	{ opacity: 1; -moz-transform: translateY(100%);}
	100%{ opacity: 1; -moz-transform: translateY(0%);}
}@-ms-keyframes s5Appear{
	0%	{ opacity: 1; -ms-transform: translateY(100%);}
	100%{ opacity: 1; -ms-transform: translateY(0%);}
}@-o-keyframes s5Appear{
	0%	{ opacity: 1; -o-transform: translateY(100%);}
	100%{ opacity: 1; -o-transform: translateY(0%);}
}@keyframes s5Appear{
	0%	{ opacity: 1; transform: translateY(100%);}
	100%{ opacity: 1; transform: translateY(0%);}
}

/*section6-消失动画*/
@-webkit-keyframes s5Disappear{
	0%	{ opacity: 1; -webkit-transform: translateY(0%);}
	100%{ opacity: 1; -webkit-transform: translateY(100%);}
}@-moz-keyframes s5Disappear{
	0%	{ opacity: 1; -moz-transform: translateY(0%);}
	100%{ opacity: 1; -moz-transform: translateY(100%);}
}@-ms-keyframes s5Disappear{
	0%	{ opacity: 1; -ms-transform: translateY(0%);}
	100%{ opacity: 1; -ms-transform: translateY(100%);}
}@-o-keyframes s5Disappear{
	0%	{ opacity: 1; -o-transform: translateY(0%);}
	100%{ opacity: 1; -o-transform: translateY(100%);}
}@keyframes s5Disappear{
	0%	{ opacity: 1; transform: translateY(0%);}
	100%{ opacity: 1; transform: translateY(100%);}
}