/* 缓慢放大效果 */
@keyframes BgZoom {
	0% {
		transform: scale(1);
		opacity:1;
	}
	100% {
		transform: scale(1.5);
		opacity:1;
	}
}
@-webkit-keyframes BgZoom {
	0% {
	-webkit-transform: scale(1);
	opacity:1;
	}
	100% {
		-webkit-transform: scale(1.5);
		opacity:1;
	}
}
@-moz-keyframes BgZoom {
	0% {
	-moz-transform: scale(1);
	opacity:1;
	}
	100% {
		-moz-transform: scale(1.5);
		opacity:1;
	}
}
.bgZoom {
	animation: BgZoom 10s linear forwards;
	-moz-animation: BgZoom 10s linear forwards;
	-webkit-animation: BgZoom 10s linear forwards;
}
/* 闪烁效果 */
@keyframes flash {
	0% {
		transform: scale(1);
		opacity:1;
	}
	100% {
		transform: scale(1.2);
		opacity:1;
	}
}
@-webkit-keyframes flash {
	0% {
	-webkit-transform: scale(1);
	opacity:1;
	}
	100% {
		-webkit-transform: scale(1.2);
		opacity:1;
	}
}
@-moz-keyframes flash {
	0% {
	-moz-transform: scale(1);
	opacity:1;
	}
	100% {
		-moz-transform: scale(1.2);
		opacity:1;
	}
}
.flash {
	animation: flash 1s linear infinite alternate;
	-moz-animation: flash 1s linear infinite alternate;
	-webkit-animation: flash 1s linear infinite alternate;
}
/* 从小放大到复还一次效果 */
@keyframes flashOnce {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
	80% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes flashOnce {
	0% {
	-webkit-transform: scale(0.5);
	opacity: 0;
	}
	80% {
	-webkit-transform: scale(1.2);
	opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@-moz-keyframes flashOnce {
	0% {
	-moz-transform: scale(0.5);
	opacity: 0;
	}
	80% {
	-moz-transform: scale(1.2);
	opacity: 1;
	}
	100% {
		-moz-transform: scale(1);
		opacity: 1;
	}
}
.flashOnce {
	animation: flashOnce 0.7s linear forwards;
	-moz-animation: flashOnce 0.7s linear forwards;
	-webkit-animation: flashOnce 0.7s linear forwards;
}
/* 缩小显示效果 */
@keyframes smallZoom {
	0% {
		transform: scale(2);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes smallZoom {
	0% {
	-webkit-transform: scale(2);
	opacity: 0;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@-moz-keyframes smallZoom {
	0% {
	-moz-transform: scale(2);
	opacity: 0;
	}
	100% {
		-moz-transform: scale(1);
		opacity: 1;
	}
}
.smallZoom {
	animation: smallZoom 0.75s ease forwards;
	-moz-animation: smallZoom 0.75s ease forwards;
	-webkit-animation: smallZoom 0.75s ease forwards;
}

@-webkit-keyframes lightSpeedIn {
		  0% {
		    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
		            transform: translate3d(100%, 0, 0) skewX(-30deg);
		    opacity: 0;
		  }
		
		  60% {
		    -webkit-transform: skewX(20deg);
		            transform: skewX(20deg);
		    opacity: 1;
		  }
		
		  80% {
		    -webkit-transform: skewX(-5deg);
		            transform: skewX(-5deg);
		    opacity: 1;
		  }
		
		  100% {
		    -webkit-transform: none;
		            transform: none;
		    opacity: 1;
		  }
		}
		
		@-moz-keyframes lightSpeedIn {
		  0% {
		    -moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
		    opacity: 0;
		  }
		
		  60% {
		    -moz-transform: skewX(20deg);
		    opacity: 1;
		  }
		
		  80% {
		    -moz-transform: skewX(-5deg);
		    opacity: 1;
		  }
		
		  100% {
		    -moz-transform: none;
		    transform: none;
		    opacity: 1;
		  }
		}
		
		@keyframes lightSpeedIn {
		  0% {
		    transform: translate3d(100%, 0, 0) skewX(-30deg);
		    opacity: 0;
		  }
		  60% {
		    transform: skewX(20deg);
		    opacity: 1;
		  }
		  80% {
		    transform: skewX(-5deg);
		    opacity: 1;
		  }
		  100% {
		   	transform: none;opacity: 1;
		  }
		}
		
		.lightSpeedIn {
		  animation: lightSpeedIn 1s ease-out 0s 1 forwards; 
			-moz-animation: lightSpeedIn 1s ease-out 0s 1 forwards;	/* Firefox */ 
 			-webkit-animation: lightSpeedIn 1s ease-out 0s 1 forwards;	/* Safari 和 Chrome */ 
 			-o-animation: lightSpeedIn 1s ease-out 0s 1 forwards;	/* Opera */ 
		}
/* 跷跷板效果		 */
.seesaw {
	animation: seesaw 2.4s linear infinite;
	-webkit-animation: seesaw 2.4s linear infinite
}

@keyframes seesaw {
	0% {
		transform: rotate(0deg);
		opacity:1;
	}

	5% {
		transform: rotate(10deg);
		opacity:1;
	}

	10% {
		transform: rotate(-10deg);
		opacity:1;
	}

	15% {
		transform: rotate(5deg);
		opacity:1;
	}

	20% {
		transform: rotate(-5deg);
		opacity:1;
	}

	30% {
		transform: rotate(0deg);
		opacity:1;
	}

	100% {
		transform: rotate(0deg);
		opacity:1;
	}
}

@-webkit-keyframes seesaw {
	0% {
		-webkit-transform: rotate(0deg);
		opacity:1;
	}

	5% {
		-webkit-transform: rotate(10deg);
		opacity:1;
	}

	10% {
		-webkit-transform: rotate(-10deg);
		opacity:1;
	}

	15% {
		-webkit-transform: rotate(5deg);
		opacity:1;
	}

	20% {
		-webkit-transform: rotate(-5deg);
		opacity:1;
	}

	30% {
		-webkit-transform: rotate(0deg);
		opacity:1;
	}

	100% {
		-webkit-transform: rotate(0deg);
		opacity:1;
	}
}
/* 摆动效果		 */
.swing {
	animation: swing 2.4s linear infinite;
	-webkit-animation: swing 2.4s linear infinite
}

@keyframes swing {
	0% {
		transform: rotate(0deg);
		opacity:1;
	}

	25% {
		transform: rotate(15deg);
		opacity:1;
	}
	75% {
		transform: rotate(-15deg);
		opacity:1;
	}
	100% {
		transform: rotate(0deg);
		opacity:1;
	}
}

@-webkit-keyframes swing {
	0% {
		-webkit-transform: rotate(0deg);
		opacity:1;
	}

	25% {
		-webkit-transform: rotate(15deg);
		opacity:1;
	}
	75% {
		-webkit-transform: rotate(-15deg);
		opacity:1;
	}
	100% {
		-webkit-transform: rotate(0deg);
		opacity:1;
	}
}

/* 螺旋放大效果 */
.spiralBg{
	animation: spiralBg 1s ease forwards;
	-webkit-animation: spiralBg 1s ease forwards;
}

@keyframes spiralBg {
	0% {
		transform: rotate(0deg) scale(0.3);
		opacity:0;
	}

	100% {
		transform: rotate(-1080deg) scale(1);
		opacity:1;
	}
}

@-webkit-keyframes spiralBg {
	0% {
		-webkit-transform: rotate(0deg) scale(0.3);
		opacity:0;
	}
	100% {
		-webkit-transform: rotate(-1080deg) scale(1);
		opacity:1;
	}
}
/* 持续旋转效果 */
.whirl{
	animation: whirl 6s linear infinite; 
	-webkit-animation: whirl 6s linear infinite; 
}
@keyframes whirl {
	0%   { transform:rotate(0deg);opacity:1; }
	100% { transform:rotate(360deg);opacity:1; }
}
@-webkit-keyframes whirl{
	0%   { -webkit-transform:rotate(0deg);opacity:1; }
	100% { -webkit-transform:rotate(360deg);opacity:1; }
}
/* 左右来回移动效果		 */
.moveLR{
	animation: moveLR 1s ease-in-out infinite alternate; 
	-webkit-animation: moveLR 2s ease-in-out infinite alternate; 
}
@keyframes moveLR {
	0%   { transform: translateX(0px);opacity:1; }
	100% { transform: translateX(20px);opacity:1; }
}
@-webkit-keyframes moveLR{
	0%   { -webkit-transform: translateX(0px);opacity:1; }
	100% { -webkit-transform: translateX(20px);opacity:1; }
}			
/* 上下来回移动效果		 */
.moveTB{
	animation: moveTB 1s ease-in-out infinite alternate; 
	-webkit-animation: moveTB 2s ease-in-out infinite alternate; 
}
@keyframes moveTB {
	0%   { transform: translateY(0px);opacity:1;}
	100% { transform: translateY(20px);opacity:1;}
}
@-webkit-keyframes moveTB{
	0%   { -webkit-transform: translateY(0px);opacity:1;}
	100% { -webkit-transform: translateY(20px);opacity:1;}
}			
.flip{ 
		-webkit-animation:flip 1s linear;
		animation:flip 1s linear;
	}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    opacity:1;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    opacity:1;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    opacity:1;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    opacity:1;
  }
  100% {
    -webkit-transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    opacity:1;
  }
}
@keyframes flip {
  0% {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
    opacity:1;
  }
  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
    opacity:1;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
    opacity:1;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
    opacity:1;
  }
  100% {
    transform: perspective(400px);
    animation-timing-function: ease-in;
    opacity:1;
  }
}
.bounceT{ 
		-webkit-animation:bounceT 1.5s linear forwards;
		animation:bounceT 2s linear forwards;
	}
@-webkit-keyframes bounceT{
  0% {
    -webkit-transform: translate3d(0,-500%,0);
    -webkit-animation-timing-function: ease-in;
    opacity:1;
  }
  30% {
    opacity:1;
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: translate3d(0,-150%,0);
    -webkit-animation-timing-function: ease-in;
    opacity:1;
  }
  70% {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-timing-function: ease-out;
    opacity:1;
  }
  80% {
    -webkit-transform: translate3d(0,-50%,0);
    -webkit-animation-timing-function: ease-in;
    opacity:1;
  }
  90% {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-timing-function: ease-out;
    opacity:1;
  }
  95% {
    -webkit-transform: translate3d(0,-12%,0);
    -webkit-animation-timing-function: ease-in;
    opacity:1;
  }
  100% {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-timing-function: ease-out;
    opacity:1;
  }
}
@keyframes bounceT{
  0% {
    transform: translate3d(0,-500%,0);
    animation-timing-function: ease-in;
    opacity:1;
  }
  30% {
    transform: translate3d(0,0,0);
    animation-timing-function: ease-out;
    opacity:1;
  }
  50% {
    transform: translate3d(0,-150%,0);
    animation-timing-function: ease-in;
    opacity:1;
  }
  70% {
    transform: translate3d(0,0,0);
    animation-timing-function: ease-out;
    opacity:1;
  }
  80% {
    transform: translate3d(0,-50%,0);
    animation-timing-function: ease-in;
    opacity:1;
  }
  90% {
    transform: translate3d(0,0,0);
    animation-timing-function: ease-out;
    opacity:1;
  }
  95% {
    transform: translate3d(0,-12%,0);
    animation-timing-function: ease-in;
    opacity:1;
  }
  100% {
    transform: translate3d(0,0,0);
    animation-timing-function: ease-out;
    opacity:1;
  }
}