﻿/*css3效果*/
.scale{
-webkit-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
transition: all .3s ease-in;}

/*渐隐渐出然后水平翻转*/
.CZ{animation:CZ 5s ease 0s infinite; -webkit-animation:CZ 5s ease 0s infinite; -ms-animation:CZ 5s ease 0s infinite; -o-animation:CZ 5s ease 0s infinite;animation-iteration-count:1;
-webkit-animation-iteration-count:1; /* Safari 和 Chrome */}

@keyframes CZ{0%{opacity:0; transform:scale(0.5, 0.5) translateY(30px);} 20%{opacity:1; transform:scale(1, 1) translateY(0px);} 26%{opacity:0; transform:rotateY(0deg);} 38%{opacity:1; transform:rotateY(0deg);} 52%{opacity:1; transform:rotateY(0deg);}}

@-webkit-keyframes CZ{0%{opacity:0; -webkit-transform:scale(0.5, 0.5) translateY(30px);} 20%{opacity:1; -webkit-transform:scale(1, 1) translateY(0px);} 26%{opacity:1; -webkit-transform:rotateY(0deg);} 38%{opacity:1; -webkit-transform:rotateY(0deg);} 52%{opacity:1; -webkit-transform:rotateY(0deg);} }

@-ms-keyframes CZ{0%{opacity:0; transform:scale(0.5, 0.5) translateY(30px);} 20%{opacity:1; transform:scale(1, 1) translateY(0px);} 26%{opacity:0; transform:rotateY(0deg);} 38%{opacity:1; transform:rotateY(0deg);} 32%{opacity:0; transform:rotateY(0deg);} 34%{opacity:1; transform:rotateY(0deg);} 54%{transform:rotateY(0deg);} }

@-o-keyframes CZ{0%{opacity:0; transform:scale(0.5, 0.5) translateY(30px);} 20%{opacity:1; transform:scale(1, 1) translateY(0px);} 26%{opacity:0; transform:rotateY(0deg);} 38%{opacity:1; transform:rotateY(0deg);} 32%{opacity:0; transform:rotateY(0deg);} 34%{opacity:1; transform:rotateY(0deg);} 54%{transform:rotateY(0deg);}}

/*右侧渐出然后水平翻转*/
.RZ{animation:RZ 5s ease 0s infinite; -webkit-animation:RZ 3s ease 0s infinite; -ms-animation:RZ 3s ease 0s infinite; -o-animation:RZ 3s ease 0s infinite;animation-iteration-count:1;
-webkit-animation-iteration-count:1; /* Safari 和 Chrome */}

@keyframes RZ{0%{opacity:0; transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; transform:scale(1, 1) translateX(90px);} 60%{opacity:1; transform:scale(1, 1) translateX(0px);} 80%{opacity:1; transform:rotateY(0deg);} 90%{opacity:1; transform:rotateY(0deg);}}

@-webkit-keyframes RZ{0%{opacity:0; -webkit-transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; -webkit-transform:scale(1, 1) translateX(0px);} 60%{opacity:1; -webkit-transform:rotateY(0deg);} 80%{opacity:1; -webkit-transform:rotateY(0deg);} 90%{opacity:1; -webkit-transform:rotateY(0deg);} }

@-ms-keyframes RZ{0%{opacity:0; transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; transform:scale(1, 1) translateX(90px);}60%{opacity:1; transform:scale(1, 1) translateX(0px);} 80%{opacity:1; transform:rotateY(0deg);} 90%{opacity:0; transform:rotateY(0deg);}  }

@-o-keyframes RZ{0%{opacity:0; transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; transform:scale(1, 1) translateX(90px);} 60%{opacity:1; transform:scale(1, 1) translateX(0px);} 80%{opacity:1; transform:rotateY(0deg);} 90%{opacity:0; transform:rotateY(0deg);}}

/*左侧渐出然后水平翻转*/
.LZ{animation:LZ 5s ease 0s infinite; -webkit-animation:LZ 3s ease 0s infinite; -ms-animation:LZ 3s ease 0s infinite; -o-animation:LZ 3s ease 0s infinite;animation-iteration-count:1;
-webkit-animation-iteration-count:1; /* Safari 和 Chrome */}

@keyframes LZ{0%{opacity:0; transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; transform:scale(1, 1) translateX(90px);} 60%{opacity:1; transform:scale(1, 1) translateX(0px);} 80%{opacity:1; transform:rotateY(0deg);} 90%{opacity:1; transform:rotateY(0deg);}}

@-webkit-keyframes LZ{0%{opacity:0; -webkit-transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; -webkit-transform:scale(1, 1) translateX(0px);} 60%{opacity:1; -webkit-transform:rotateY(0deg);} 80%{opacity:1; -webkit-transform:rotateY(0deg);} 90%{opacity:1; -webkit-transform:rotateY(0deg);} }

@-ms-keyframes LZ{0%{opacity:0; transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; transform:scale(1, 1) translateX(90px);}60%{opacity:1; transform:scale(1, 1) translateX(0px);} 80%{opacity:1; transform:rotateY(0deg);} 90%{opacity:0; transform:rotateY(0deg);}  }

@-o-keyframes LZ{0%{opacity:0; transform:scale(0.3, 0.3) translateX(180px);} 30%{opacity:1; transform:scale(1, 1) translateX(90px);} 60%{opacity:1; transform:scale(1, 1) translateX(0px);} 80%{opacity:1; transform:rotateY(0deg);} 90%{opacity:0; transform:rotateY(0deg);}}

.DZ{  animation:DZ 5s ease 0s infinite; -webkit-animation:DZ 5s ease 0s infinite; -ms-animation:DZ 5s ease 0s infinite; -o-animation:DZ 5s ease 0s infinite; }
@keyframes DZ { 0%{ opacity:0; transform:scale(0.5, 0.5) translateY(30px);} 20%{ opacity:1; transform:scale(1, 1) translateY(0px);} 26%{ opacity:0; transform:rotateY(0deg);} 28%{opacity:1; transform:rotateY(0deg);} 32%{opacity:0; transform:rotateY(0deg);} 34%{opacity:1; transform:rotateY(0deg);} 54%{ transform:rotateY(180deg);} 74%{ transform:rotateY(0deg);} 90%{ opacity:1;} 100%{ opacity:0;}}
@-webkit-keyframes DZ { 0%{ opacity:0; -webkit-transform:scale(0.5, 0.5) translateY(30px);} 20%{ opacity:1; -webkit-transform:scale(1, 1) translateY(0px);} 26%{ opacity:0; -webkit-transform:rotateY(0deg);} 28%{opacity:1; -webkit-transform:rotateY(0deg);} 32%{opacity:0; -webkit-transform:rotateY(0deg);} 34%{opacity:1; -webkit-transform:rotateY(0deg);} 54%{ -webkit-transform:rotateY(180deg);} 74%{ -webkit-transform:rotateY(0deg);} 90%{ opacity:1;} 100%{ opacity:0;}}
@-ms-keyframes DZ { 0%{ opacity:0; transform:scale(0.5, 0.5) translateY(30px);} 20%{ opacity:1; transform:scale(1, 1) translateY(0px);} 26%{ opacity:0; transform:rotateY(0deg);} 28%{opacity:1; transform:rotateY(0deg);} 32%{opacity:0; transform:rotateY(0deg);} 34%{opacity:1; transform:rotateY(0deg);} 54%{ transform:rotateY(180deg);} 74%{ transform:rotateY(0deg);} 90%{ opacity:1;} 100%{ opacity:0;}}
@-o-keyframes DZ { 0%{ opacity:0; transform:scale(0.5, 0.5) translateY(30px);} 20%{ opacity:1; transform:scale(1, 1) translateY(0px);} 26%{ opacity:0; transform:rotateY(0deg);} 28%{opacity:1; transform:rotateY(0deg);} 32%{opacity:0; transform:rotateY(0deg);} 34%{opacity:1; transform:rotateY(0deg);} 54%{ transform:rotateY(180deg);} 74%{ transform:rotateY(0deg);} 90%{ opacity:1;} 100%{ opacity:0;}}

.hscale{transition: 0.3s all; -moz-transition: 0.3s all; -webkit-transition: 0.3s all; -o-transition: 0.3s all;}
.hscale:hover{transform:scale(1.02,1.02);-ms-transform:scale(1.02,1.02);-moz-transform:scale(1.02,1.02); -webkit-transform:scale(1.02,1.02);-o-transform:scale(1.02,1.02);}


p.j_icons{
	-webkit-animation:zhuan1 1s linear 0s infinite alternate;
	-moz-animation:zhuan1 1s linear 0s infinite alternate;
	-o-animation:zhuan1 1s linear 0s infinite alternate;
	-ms-animation:zhuan1 1s linear 0s infinite alternate;
	animation:zhuan1 1s linear 0s infinite alternate;
}
.j_icons img,img.j_icons{
	-webkit-animation:zhuan1 6s linear 0s infinite alternate;
	-moz-animation:zhuan1 6s linear 0s infinite alternate;
	-o-animation:zhuan1 6s linear 0s infinite alternate;
	-ms-animation:zhuan1 6s linear 0s infinite alternate;
	animation:zhuan1 6s linear 0s infinite alternate;
}

@-webkit-keyframes zhuan1{
	from{
		opacity:1;-webkit-transform:rotate(0deg)scale(0.7);
	}
	to{
	opacity:1;-webkit-transform:rotate(0deg) scale(1);
	}
}
@-moz-keyframes zhuan1{
	from{
		opacity:1;-moz-transform:rotate(0deg)scale(0.7);
	}
	to{
		opacity:1;-moz-transform:rotate(0deg) scale(1);
	}
}
@keyframes zhuan1{
	from{
		opacity:1;transform:rotate(0deg)scale(0.7);
	}
	to{
		opacity:1;transform:rotate(0deg) scale(1);
	}
}
@-ms-keyframes zhuan1{
	from{
		opacity:1;-ms-transform:rotate(0deg)scale(0.7);
	}
	to{
		opacity:1;-ms-transform:rotate(0deg) scale(1);
	}
}

