/*落地反弹*/
.fantan{
	-webkit-animation-name: fantan;
	animation-name: fantan
}


@-webkit-keyframes fantan {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	30% {
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	65% {
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}
	78% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	88% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0)
	}
	95% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes fantan {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	30% {
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	65% {
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}
	78% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	88% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0)
	}
	95% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

/*左右抖动*/
.shakeLeftRight{
	-webkit-animation-name: shakeLeftRight;
	animation-name: shakeLeftRight
}

@-webkit-keyframes shakeLeftRight {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes shakeLeftRight {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

/*上下抖动*/
.shakeUpDown{
	-webkit-animation-name: shakeUpDown;
	animation-name: shakeUpDown
}

@-webkit-keyframes shakeUpDown {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes shakeUpDown {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

/*摆动出现*/
.shakeInRight{
	-webkit-animation-name: shakeInRight;
	animation-name: shakeInRight
}

@-webkit-keyframes shakeInRight {
	0% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg);
		opacity: 0;
	}
	20%{
		opacity: 1;
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-40deg);
		transform: rotate(-40deg);
	}
	35%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
	}
	45%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	50% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes shakeInRight {
	0% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg);
		opacity: 0;
	}
	20%{
		opacity: 1;
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-40deg);
		transform: rotate(-40deg);
	}
	35%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
	}
	45%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	50% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

/*摆动出现*/
.shakeInLeft{
	-webkit-animation-name: shakeInLeft;
	animation-name: shakeInLeft
}

@-webkit-keyframes shakeInLeft {
	0% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-120deg);
		transform: rotate(-120deg);
		opacity: 0;
	}
	20%{
		opacity: 1;
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);
	}
	35%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
	45%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	50% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes shakeInLeft {
	0% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-120deg);
		transform: rotate(-120deg);
		opacity: 0;
	}
	20%{
		opacity: 1;
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);
	}
	35%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
	45%{
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	50% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform-origin: 45% 100%;
		transform-origin: 45% 100%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

.baidong{
	-webkit-animation-name: baidong;
	animation-name: baidong
}

@-webkit-keyframes baidong {
	0% {
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25%{
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	50%{
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	75%{
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	100% {
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	
}

@keyframes baidong {
	0% {
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25%{
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	50%{
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	75%{
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	100% {
		-webkit-transform-origin: 40% 10%;
		transform-origin: 40% 10%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	
}

/*出现跑掉*/
.fadeInRun{
	-webkit-animation-name: fadeInRun;
	animation-name: fadeInRun
}

@-webkit-keyframes fadeInRun {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	30%{
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0
		-webkit-transform: translate3d(300px, -300px, 0);
		transform: translate3d(300px, -300px, 0);
	}
	
}

@keyframes fadeInRun {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	30%{
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0
		-webkit-transform: translate3d(300px, -300px, 0);
		transform: translate3d(300px, -300px, 0);
	}
	
}

/*悬挂脱落*/
.hingeRight {
	-webkit-animation-name: hingeRight;
	animation-name: hingeRight
}

@-webkit-keyframes hingeRight {
	0% {
		-webkit-transform-origin: top left;
		transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	20%,
	60% {
		-webkit-transform: rotate(80deg);
		transform: rotate(80deg);
		-webkit-transform-origin: top left;
		transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	40%,
	80% {
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
		-webkit-transform-origin: top left;
		transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, 700px, 0);
		transform: translate3d(0, 700px, 0);
		opacity: 0
	}
}

@keyframes hingeRight {
	0% {
		-webkit-transform-origin: top left;
		transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	20%,
	60% {
		-webkit-transform: rotate(80deg);
		transform: rotate(80deg);
		-webkit-transform-origin: top left;
		transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	40%,
	80% {
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
		-webkit-transform-origin: top left;
		transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, 700px, 0);
		transform: translate3d(0, 700px, 0);
		opacity: 0
	}
}

/*悬挂脱落*/
.hingeLeft {
	-webkit-animation-name: hingeLeft;
	animation-name: hingeLeft
}

@-webkit-keyframes hingeLeft {
	0% {
		-webkit-transform-origin: top right;
		transform-origin: top right;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	20%,
	60% {
		-webkit-transform: rotate(-80deg);
		transform: rotate(-80deg);
		-webkit-transform-origin: top right;
		transform-origin: top right;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	40%,
	80% {
		-webkit-transform: rotate(-60deg);
		transform: rotate(-60deg);
		-webkit-transform-origin: top right;
		transform-origin: top right;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, -700px, 0);
		transform: translate3d(0, -700px, 0);
		opacity: 0
	}
}

@keyframes hingeLeft {
	0% {
		-webkit-transform-origin: top right;
		transform-origin: top right;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	20%,
	60% {
		-webkit-transform: rotate(-80deg);
		transform: rotate(-80deg);
		-webkit-transform-origin: top right;
		transform-origin: top right;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out
	}
	40%,
	80% {
		-webkit-transform: rotate(-60deg);
		transform: rotate(-60deg);
		-webkit-transform-origin: top right;
		transform-origin: top right;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, 700px, 0);
		transform: translate3d(0, 700px, 0);
		opacity: 0
	}
}

/*旋转进入-可设置旋转圈数*/
.twisterInUpRight {
	-webkit-animation-name: twisterInUpRight;
	animation-name: twisterInUpRight
}

@-webkit-keyframes twisterInUpRight {
	0% {
		opacity: 0;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateX(-100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateX(0) rotate(0deg)
	}
}

@keyframes twisterInUpRight {
	0% {
		opacity: 0;
		transform-origin: center center;
		transform: scale(1) translateX(-100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		transform-origin: center center;
		transform: scale(1) translateX(0) rotate(0deg)
	}
}

/*旋转进入-可设置旋转圈数*/
.twisterInUpLeft {
	-webkit-animation-name: twisterInUpLeft;
	animation-name: twisterInUpLeft
}

@-webkit-keyframes twisterInUpLeft {
	0% {
		opacity: 0;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateX(100%) rotate(1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateX(0) rotate(0deg)
	}
}

@keyframes twisterInUpLeft {
	0% {
		opacity: 0;
		transform-origin: center center;
		transform: scale(1) translateX(100%) rotate(1turn)
	}
	to {
		opacity: 1;
		transform-origin: center center;
		transform: scale(1) translateX(0) rotate(0deg)
	}
}

/*旋转进入-可设置旋转圈数*/
.twisterInUpDown {
	-webkit-animation-name: twisterInUpDown;
	animation-name: twisterInUpDown
}

@-webkit-keyframes twisterInUpDown {
	0% {
		opacity: 0;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateY(-100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateY(0) rotate(0deg)
	}
}

@keyframes twisterInUpDown {
	0% {
		opacity: 0;
		transform-origin: center center;
		transform: scale(1) translateY(-100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		transform-origin: center center;
		transform: scale(1) translateY(0) rotate(0deg)
	}
}

/*旋转进入-可设置旋转圈数*/
.twisterInUpUp {
	-webkit-animation-name: twisterInUpUp;
	animation-name: twisterInUpUp
}

@-webkit-keyframes twisterInUpUp {
	0% {
		opacity: 0;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateY(100%) rotate(1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1) translateY(0) rotate(0deg)
	}
}

@keyframes twisterInUpUp {
	0% {
		opacity: 0;
		transform-origin: center center;
		transform: scale(1) translateY(100%) rotate(1turn)
	}
	to {
		opacity: 1;
		transform-origin: center center;
		transform: scale(1) translateY(0) rotate(0deg)
	}
}

.slideUp {
	-webkit-animation-name: slideUp;
	animation-name: slideUp
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform-origin: 0 0;
		-webkit-transform: translateY(0)
	}
	to {
		-webkit-transform-origin: 0 0;
		-webkit-transform: translateY(-100%)
	}
}

@keyframes slideUp {
	0% {
		transform-origin: 0 0;
		transform: translateY(0)
	}
	to {
		transform-origin: 0 0;
		transform: translateY(-100%)
	}
}

.slideDown {
	-webkit-animation-name: slideDown;
	animation-name: slideDown
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform-origin: 0 0;
		-webkit-transform: translateY(0)
	}
	to {
		-webkit-transform-origin: 0 0;
		-webkit-transform: translateY(100%)
	}
}

@keyframes slideDown {
	0% {
		transform-origin: 0 0;
		transform: translateY(0)
	}
	to {
		transform-origin: 0 0;
		transform: translateY(100%)
	}
}

@-webkit-keyframes puffOut {
	0% {
		opacity: 1;
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(1);
		-webkit-filter: blur(0)
	}
	to {
		opacity: 0;
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(2);
		-webkit-filter: blur(2px)
	}
}

@keyframes puffOut {
	0% {
		opacity: 1;
		transform-origin: 50% 50%;
		transform: scale(1);
		-webkit-filter: blur(0)
	}
	to {
		opacity: 0;
		transform-origin: 50% 50%;
		transform: scale(2);
		-webkit-filter: blur(2px)
	}
}

/*放大消失*/
.puffOut {
	-webkit-animation-name: puffOut;
	animation-name: puffOut
}

@-webkit-keyframes puffIn {
	0% {
		opacity: 0;
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(2)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(1)
	}
}

@keyframes puffIn {
	0% {
		opacity: 0;
		transform-origin: 50% 50%;
		transform: scale(2)
	}
	to {
		opacity: 1;
		transform-origin: 50% 50%;
		transform: scale(1)
	}
}

/*缩小进入*/
.puffIn {
	-webkit-animation-name: puffIn;
	animation-name: puffIn
}

@-webkit-keyframes twisterInDownRight {
	0% {
		opacity: 0;
		-webkit-transform-origin: left top;
		-webkit-transform: scale(1) translateX(-100%) rotate(1turn)
	}
	30% {
		-webkit-transform-origin: left top;
		-webkit-transform: scale(0) translateX(-100%) rotate(1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: left top;
		-webkit-transform: scale(1) translateX(0) rotate(0deg)
	}
}

@keyframes twisterInDownRight {
	0% {
		opacity: 0;
		transform-origin: left top;
		transform: scale(0) translateX(-100%) rotate(1turn)
	}
	30% {
		transform-origin: left top;
		transform: scale(0) translateX(-100%) rotate(1turn)
	}
	to {
		opacity: 1;
		transform-origin: left top;
		transform: scale(1) translateX(0) rotate(0deg)
	}
}

/*魔幻进入*/
.twisterInDownRight {
	-webkit-animation-name: twisterInDownRight;
	animation-name: twisterInDownRight
}

@-webkit-keyframes twisterInDownLeft {
	0% {
		opacity: 0;
		-webkit-transform-origin: right bottom;
		-webkit-transform: scale(0) translateX(100%) rotate(-1turn)
	}
	30% {
		-webkit-transform-origin: right bottom;
		-webkit-transform: scale(0) translateX(100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: right bottom;
		-webkit-transform: scale(1) translateX(0) rotate(0deg)
	}
}

@keyframes twisterInDownLeft {
	0% {
		opacity: 0;
		transform-origin: right bottom;
		transform: scale(0) translateX(100%) rotate(-1turn)
	}
	30% {
		transform-origin: right bottom;
		transform: scale(0) translateX(100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		transform-origin: right bottom;
		transform: scale(1) translateX(0) rotate(0deg)
	}
}

/*魔幻进入*/
.twisterInDownLeft {
	-webkit-animation-name: twisterInDownLeft;
	animation-name: twisterInDownLeft
}

@-webkit-keyframes twisterInDownDown {
	0% {
		opacity: 0;
		-webkit-transform-origin: right top;
		-webkit-transform: scale(0) translateY(-100%) rotate(1turn)
	}
	30% {
		-webkit-transform-origin: right top;
		-webkit-transform: scale(0) translateY(-100%) rotate(1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: right top;
		-webkit-transform: scale(1) translateY(0) rotate(0deg)
	}
}

@keyframes twisterInDownDown {
	0% {
		opacity: 0;
		transform-origin: right top;
		transform: scale(0) translateY(-100%) rotate(1turn)
	}
	30% {
		transform-origin: right top;
		transform: scale(0) translateY(-100%) rotate(1turn)
	}
	to {
		opacity: 1;
		transform-origin: right top;
		transform: scale(1) translateY(0) rotate(0deg)
	}
}

/*魔幻进入*/
.twisterInDownDown {
	-webkit-animation-name: twisterInDownDown;
	animation-name: twisterInDownDown
}

@-webkit-keyframes twisterInDownUp {
	0% {
		opacity: 0;
		-webkit-transform-origin: left bottom;
		-webkit-transform: scale(0) translateY(100%) rotate(-1turn)
	}
	30% {
		-webkit-transform-origin: left bottom;
		-webkit-transform: scale(0) translateY(100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		-webkit-transform-origin: left bottom;
		-webkit-transform: scale(1) translateY(0) rotate(0deg)
	}
}

@keyframes twisterInDownUp {
	0% {
		opacity: 0;
		transform-origin: left bottom;
		transform: scale(0) translateY(100%) rotate(-1turn)
	}
	30% {
		transform-origin: left bottom;
		transform: scale(0) translateY(100%) rotate(-1turn)
	}
	to {
		opacity: 1;
		transform-origin: left bottom;
		transform: scale(1) translateY(0) rotate(0deg)
	}
}

/*魔幻进入*/
.twisterInDownUp {
	-webkit-animation-name: twisterInDownUp;
	animation-name: twisterInDownUp
}

@-webkit-keyframes rollInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none
	}
}

@keyframes rollInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
		transform: translate3d(-100%, 0, 0) rotate(-120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

/*旋转进入*/
.rollInRight {
	-webkit-animation-name: rollInRight;
	animation-name: rollInRight
}

@-webkit-keyframes rollInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
		transform: translate3d(100%, 0, 0) rotate(120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes rollInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
		transform: translate3d(100%, 0, 0) rotate(120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

/*旋转进入*/
.rollInLeft {
	-webkit-animation-name: rollInLeft;
	animation-name: rollInLeft
}

@-webkit-keyframes rollInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0) rotateX(120deg);
		transform: translate3d(0, -100%, 0) rotateX(120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes rollInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0) rotateX(120deg);
		transform: translate3d(0, -100%, 0) rotateX(120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

/*旋转进入*/
.rollInDown {
	-webkit-animation-name: rollInDown;
	animation-name: rollInDown
}

@-webkit-keyframes rollInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) rotateX(-120deg);
		transform: translate3d(0, 100%, 0) rotateX(-120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes rollInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) rotateX(-120deg);
		transform: translate3d(0, 100%, 0) rotateX(-120deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

/*旋转进入*/
.rollInUp {
	-webkit-animation-name: rollInUp;
	animation-name: rollInUp
}

@-webkit-keyframes lightSpeedInRight {
	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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

@keyframes lightSpeedInRight {
	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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

/*光速进入*/
.lightSpeedInRight {
	-webkit-animation-name: lightSpeedInRight;
	animation-name: lightSpeedInRight;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedInLeft {
	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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

@keyframes lightSpeedInLeft {
	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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

/*光速进入*/
.lightSpeedInLeft {
	-webkit-animation-name: lightSpeedInLeft;
	animation-name: lightSpeedInLeft;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}

@keyframes lightSpeedInDown {
	0% {
		-webkit-transform: translate3d(0, -100%, 0) skewX(-30deg);
		transform: translate3d(0, -100%, 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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

@-webkit-keyframes lightSpeedInDown {
	0% {
		-webkit-transform: translate3d(0, -100%, 0) skewX(-30deg);
		transform: translate3d(0, -100%, 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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

/*光速进入*/
.lightSpeedInDown {
	-webkit-animation-name: lightSpeedInDown;
	animation-name: lightSpeedInDown;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}

@keyframes lightSpeedInUp {
	0% {
		-webkit-transform: translate3d(0, 100%, 0) skewX(-30deg);
		transform: translate3d(0, 100%, 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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

@-webkit-keyframes lightSpeedInUp {
	0% {
		-webkit-transform: translate3d(0, 100%, 0) skewX(-30deg);
		transform: translate3d(0, 100%, 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
	}
	to {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

/*光速进入*/
.lightSpeedInUp {
	-webkit-animation-name: lightSpeedInUp;
	animation-name: lightSpeedInUp;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}

@-webkit-keyframes rollOutRight {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
		transform: translate3d(100%, 0, 0) rotate(120deg)
	}
}

@keyframes rollOutRight {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
		transform: translate3d(100%, 0, 0) rotate(120deg)
	}
}

/*旋转消失*/
.rollOutRight {
	-webkit-animation-name: rollOutRight;
	animation-name: rollOutRight
}

@-webkit-keyframes rollOutLeft {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
		transform: translate3d(-100%, 0, 0) rotate(-120deg)
	}
}

@keyframes rollOutLeft {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
		transform: translate3d(-100%, 0, 0) rotate(-120deg)
	}
}

/*旋转消失*/
.rollOutLeft {
	-webkit-animation-name: rollOutLeft;
	animation-name: rollOutLeft
}

@-webkit-keyframes rollOutDown {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) rotate(120deg);
		transform: translate3d(0, 100%, 0) rotate(120deg)
	}
}

@keyframes rollOutDown {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) rotate(120deg);
		transform: translate3d(0, 100%, 0) rotate(120deg)
	}
}

/*旋转消失*/
.rollOutDown {
	-webkit-animation-name: rollOutDown;
	animation-name: rollOutDown
}

@-webkit-keyframes rollOutUp {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0) rotate(-120deg);
		transform: translate3d(0, -100%, 0) rotate(-120deg)
	}
}

@keyframes rollOutUp {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0) rotate(-120deg);
		transform: translate3d(0, -100%, 0) rotate(-120deg)
	}
}

/*旋转消失*/
.rollOutUp {
	-webkit-animation-name: rollOutUp;
	animation-name: rollOutUp
}

@-webkit-keyframes lightSpeedOutRight {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
		transform: translate3d(100%, 0, 0) skewX(30deg);
		opacity: 0
	}
}

@keyframes lightSpeedOutRight {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
		transform: translate3d(100%, 0, 0) skewX(30deg);
		opacity: 0
	}
}

/*光束消失*/
.lightSpeedOutRight {
	-webkit-animation-name: lightSpeedOutRight;
	animation-name: lightSpeedOutRight;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutLeft {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
		transform: translate3d(-100%, 0, 0) skewX(30deg);
		opacity: 0
	}
}

@keyframes lightSpeedOutLeft {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
		transform: translate3d(-100%, 0, 0) skewX(30deg);
		opacity: 0
	}
}

/*光束消失*/
.lightSpeedOutLeft {
	-webkit-animation-name: lightSpeedOutLeft;
	animation-name: lightSpeedOutLeft;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutDown {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, 100%, 0) skewY(30deg);
		transform: translate3d(0, 100%, 0) skewY(30deg);
		opacity: 0
	}
}

@keyframes lightSpeedOutDown {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, 100%, 0) skewY(30deg);
		transform: translate3d(0, 100%, 0) skewY(30deg);
		opacity: 0
	}
}

/*光束消失*/
.lightSpeedOutDown {
	-webkit-animation-name: lightSpeedOutDown;
	animation-name: lightSpeedOutDown;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutUp {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, -100%, 0) skewY(30deg);
		transform: translate3d(0, -100%, 0) skewY(30deg);
		opacity: 0
	}
}

@keyframes lightSpeedOutUp {
	0% {
		opacity: 1
	}
	to {
		-webkit-transform: translate3d(0, -100%, 0) skewY(30deg);
		transform: translate3d(0, -100%, 0) skewY(30deg);
		opacity: 0
	}
}

/*光束消失*/
.lightSpeedOutUp {
	-webkit-animation-name: lightSpeedOutUp;
	animation-name: lightSpeedOutUp;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}

@-webkit-keyframes heartbeat {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes heartbeat {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

/*心跳*/
.heartbeat {
	-webkit-animation-name: heartbeat;
	animation-name: heartbeat
}

@-webkit-keyframes jello {
	11.1% {
		-webkit-transform: none;
		transform: none
	}
	22.2% {
		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
		transform: skewX(-12.5deg) skewY(-12.5deg)
	}
	33.1% {
		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
		transform: skewX(6.25deg) skewY(6.25deg)
	}
	44.4% {
		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
		transform: skewX(-3.125deg) skewY(-3.125deg)
	}
	55.5% {
		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
		transform: skewX(1.5625deg) skewY(1.5625deg)
	}
	66.6% {
		-webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
		transform: skewX(-.78125deg) skewY(-.78125deg)
	}
	77.7% {
		-webkit-transform: skewX(.19062deg) skewY(.19062deg);
		transform: skewX(.19062deg) skewY(.19062deg)
	}
	88.8% {
		-webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
		transform: skewX(-.19531deg) skewY(-.19531deg)
	}
	to {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes jello {
	11.1% {
		-webkit-transform: none;
		transform: none
	}
	22.2% {
		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
		transform: skewX(-12.5deg) skewY(-12.5deg)
	}
	33.1% {
		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
		transform: skewX(6.25deg) skewY(6.25deg)
	}
	44.4% {
		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
		transform: skewX(-3.125deg) skewY(-3.125deg)
	}
	55.5% {
		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
		transform: skewX(1.5625deg) skewY(1.5625deg)
	}
	66.6% {
		-webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
		transform: skewX(-.78125deg) skewY(-.78125deg)
	}
	77.7% {
		-webkit-transform: skewX(.19062deg) skewY(.19062deg);
		transform: skewX(.19062deg) skewY(.19062deg)
	}
	88.8% {
		-webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
		transform: skewX(-.19531deg) skewY(-.19531deg)
	}
	to {
		-webkit-transform: none;
		transform: none
	}
}

/*倾斜摆动*/
.jello {
	-webkit-animation-name: jello;
	animation-name: jello;
	-webkit-transform-origin: center;
	transform-origin: center
}

@-webkit-keyframes scaleUp {
	0% {
		-webkit-transform: scale(1)
	}
	to {
		-webkit-transform: scale(1.5)
	}
}

@keyframes scaleUp {
	0% {
		transform: scale(1)
	}
	to {
		transform: scale(1.5)
	}
}


.scaleUp {
	-webkit-animation-name: scaleUp;
	animation-name: scaleUp
}

@-webkit-keyframes scaleDown {
	0% {
		-webkit-transform: scale(1.5)
	}
	to {
		-webkit-transform: scale(1)
	}
}

@keyframes scaleDown {
	0% {
		transform: scale(1.5)
	}
	to {
		transform: scale(1)
	}
}

.scaleDown {
	-webkit-animation-name: scaleDown;
	animation-name: scaleDown
}

@-webkit-keyframes blur {
	0% {
		-webkit-filter: blur(0)
	}
	to {
		-webkit-filter: blur(8px)
	}
}

@keyframes blur {
	0% {
		-webkit-filter: blur(0)
	}
	to {
		-webkit-filter: blur(8px)
	}
}

/*模糊*/
.blur {
	-webkit-animation-name: blur;
	animation-name: blur
}

@-webkit-keyframes sharp {
	0% {
		-webkit-filter: blur(8px)
	}
	to {
		-webkit-filter: blur(0)
	}
}

@keyframes sharp {
	0% {
		-webkit-filter: blur(8px)
	}
	to {
		-webkit-filter: blur(0)
	}
}

/*模糊消失*/
.sharp {
	-webkit-animation-name: sharp;
	animation-name: sharp
}


@-webkit-keyframes rotating {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0.1)
	}
	to {
		opacity: 1;
		transform: rotate(1turn) scale(1)
	}
}

@keyframes rotating {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0.1)
	}
	to {
		opacity: 1;
		transform: rotate(1turn) scale(1)
	}
}

/*原地旋转*/
.rotating {
	-webkit-animation-name: rotating;
	animation-name: rotating
}

/*星星闪烁*/
.starflash {
	-webkit-animation-name: starflash;
	animation-name: starflash
}

@-webkit-keyframes starflash {
	0% {
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(.1);
		transform: scale(.1);
		transform: rotate(0deg);
		opacity: 0;
	}
	50%{
		-webkit-transform-origin: 50% 50%;
		transform: rotate(1turn);
		opacity: 1;
	}
	100% {
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(.1);
		transform: scale(.1);
		transform: rotate(0deg);
		opacity: 0;
	}
}

@keyframes starflash {
	0% {
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(.1);
		transform: scale(.1);
		transform: rotate(0deg);
		opacity: 0;
	}
	50%{
		-webkit-transform-origin: 50% 50%;
		transform: rotate(1turn);
		opacity: 1;
	}
	100% {
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: scale(.1);
		transform: scale(.1);
		transform: rotate(0deg);
		opacity: 0;
	}
}