/*晃动*/
@-webkit-keyframes icon {
	0% {
		opacity: 0;
		transform: rotate(0deg)
	}

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

	10% {
		transform: rotate(-10deg)
	}

	15% {
		transform: rotate(5deg)
	}

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

	30% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(0deg)
	}
}

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

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

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

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

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

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

	100% {
		-webkit-transform: rotate(0deg)
	}
}

/*星星闪烁*/
@-webkit-keyframes star {
	0% {
		-webkit-filter: brightness(0.8);
	}

	100% {
		-webkit-filter: brightness(1.5);
	}
}

@-webkit-keyframes ripple {
	0% {
		box-shadow: 0 0 0 0 rgba(249, 8, 27, 0.25), 0 0 0 5px rgba(249, 8, 27, 0.25), 0 0 0 10px rgba(249, 8, 27, 0.25), 0 0 0 15px rgba(249, 8, 27, 0.25);
	}

	100% {
		box-shadow: 0 0 0 5px rgba(249, 8, 27, 0.25), 0 0 0 10px rgba(249, 8, 27, 0.25), 0 0 0 15px rgba(249, 8, 27, 0.25), 0 0 0 20px rgba(249, 8, 27, 0);
	}
}

/*
-webkit-filter 支持的效果有：

blur 模糊
brightness 亮度
contrast 对比度
drop-shadow 阴影
grayscale 灰度
opacity 透明度
sepia 褐色
invert 反色
saturate 饱和度
hue-rotate 色相旋转
*/
/*放大*/
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/*--------------向右侧倾斜滑动-------------------*/
@-webkit-keyframes lightSpeedInLeft {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0) skewX(-8deg);
		transform: translate3d(-100%, 0, 0) skewX(-8deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

@keyframes lightSpeedInLeft {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0) skewX(-8deg);
		transform: translate3d(-100%, 0, 0) skewX(-8deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

/*--------------向左侧倾斜滑动-------------------*/
@-webkit-keyframes lightSpeedIn {
	0% {
		-webkit-transform: translate3d(100%, 0, 0) skewX(-5deg);
		transform: translate3d(100%, 0, 0) skewX(-5deg);
		opacity: 0;
	}

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

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

	100% {
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

@keyframes lightSpeedIn {
	0% {
		-webkit-transform: translate3d(100%, 0, 0) skewX(-5deg);
		transform: translate3d(100%, 0, 0) skewX(-5deg);
		opacity: 0;
	}

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

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

	100% {
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

/*--------------上下跳动-------------------*/
@-webkit-keyframes bounce {

	0%,
	20%,
	53%,
	80%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0);
	}

	70% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}

@keyframes bounce {

	0%,
	20%,
	53%,
	80%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0);
	}

	70% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}

/*--------------闪现-------------------*/
@-webkit-keyframes flash {

	0%,
	50%,
	100% {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

@keyframes flash {

	0%,
	50%,
	100% {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

/*--------------缩放------------------*/
@-webkit-keyframes enlarge {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes enlarge {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/*--------------横向缩放弹跳-------------------*/
@-webkit-keyframes rubberBand {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes rubberBand {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/*--------------左右滑动-------------------*/
@-webkit-keyframes shake {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0);
	}

	80% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes shake {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0);
	}

	80% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/*--------------向左直线运动并返回------------------*/
@-webkit-keyframes shake1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40% {
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}

	80% {
		-webkit-transform: translate3d(-200px, 0, 0);
		transform: translate3d(-200px, 0, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes shake1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40% {
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}

	80% {
		-webkit-transform: translate3d(-200px, 0, 0);
		transform: translate3d(-200px, 0, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/*--------------左右倾斜摇晃------------------*/
@-webkit-keyframes swing {
	20% {
		-webkit-transform: rotate3d(0, 0, 1, .5deg);
		transform: rotate3d(0, 0, 1, .5deg);
	}

	40% {
		-webkit-transform: rotate3d(0, 0, 1, -.5deg);
		transform: rotate3d(0, 0, 1, -.5deg);
	}

	60% {
		-webkit-transform: rotate3d(0, 0, 1, 5deg);
		transform: rotate3d(0, 0, 1, 5deg);
	}

	80% {
		-webkit-transform: rotate3d(0, 0, 1, -5deg);
		transform: rotate3d(0, 0, 1, -5deg);
	}

	100% {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

@keyframes swing {
	20% {
		-webkit-transform: rotate3d(0, 0, 1, .5deg);
		transform: rotate3d(0, 0, 1, .5deg);
	}

	40% {
		-webkit-transform: rotate3d(0, 0, 1, -.5deg);
		transform: rotate3d(0, 0, 1, -.5deg);
	}

	60% {
		-webkit-transform: rotate3d(0, 0, 1, 5deg);
		transform: rotate3d(0, 0, 1, 5deg);
	}

	80% {
		-webkit-transform: rotate3d(0, 0, 1, -5deg);
		transform: rotate3d(0, 0, 1, -5deg);
	}

	100% {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

/*--------------放大并左右倾斜摇晃------------------*/
@-webkit-keyframes tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/*--------------左右晃动-------------------*/
@-webkit-keyframes wobble {
	0% {
		-webkit-transform: none;
		transform: none;
	}

	15% {
		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}

	30% {
		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}

	45% {
		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}

	60% {
		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}

	75% {
		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}

	100% {
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes wobble {
	0% {
		-webkit-transform: none;
		transform: none;
	}

	15% {
		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}

	30% {
		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}

	45% {
		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}

	60% {
		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}

	75% {
		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}

	100% {
		-webkit-transform: none;
		transform: none;
	}
}

/*-----------------自上向下跳入-----------*/
@-webkit-keyframes bounceInDown {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}

	60% {
		opacity: 0.8;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}

	75% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		opacity: 1;
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes bounceInDown {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}

	60% {
		opacity: 0.8;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}

	75% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		opacity: 1;
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}



/*--------------放大弹跳出现-------------------*/
@-webkit-keyframes bounceIn {

	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes bounceIn {

	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}


/*--------------自上向下弹跳出现-------------------*/
@-webkit-keyframes bounceInDown {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}

	60% {
		opacity: 0.8;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}

	75% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		opacity: 1;
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------从左侧滑入-------------------*/
@-webkit-keyframes bounceInLeft {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(-200px, 0, 0);
		transform: translate3d(-200px, 0, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(25px, 0, 0);
		transform: translate3d(25px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0);
	}

	90% {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0);
	}

	100% {
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------从右侧滑入-------------------*/
@-webkit-keyframes bounceInRight {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(200px, 0, 0);
		transform: translate3d(200px, 0, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
		transform: translate3d(-25px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}

	90% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}

	100% {
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------自下向上滑入-------------------*/
@-webkit-keyframes bounceInUp {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 300px, 0);
		transform: translate3d(0, 300px, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	75% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/*--------------上下快速跳动-------------------*/
@-webkit-keyframes bounceInUp1 {

	0%,
	5%,
	10%,
	15%,
	20%,
	25%,
	30%,
	35%,
	40%,
	45%,
	50%,
	55%,
	60%,
	65%,
	70%,
	75%,
	80%,
	85%,
	90%,
	95%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 200px, 0);
		transform: translate3d(0, 200px, 0);
	}

	5% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0);
	}

	10% {
		opacity: 1;
		-webkit-transform: translate3d(0, 10px, 0) transform: translate3d(0, 10px, 0);
	}

	15% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0);
	}


	20% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	25% {
		opacity: 1;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}


	30% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	35% {
		opacity: 1;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	40% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	45% {
		opacity: 1;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

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

	55% {
		opacity: 1;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	60% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	65% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	70% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	75% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	80% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	85% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	95% {
		opacity: 1;
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/*--------------上下跳动-------------------*/
@-webkit-keyframes bounceInUp2 {

	0%,
	10%,
	20%,
	30%,
	40%,
	50%,
	60%,
	70%,
	80%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 200px, 0);
		transform: translate3d(0, 200px, 0);
	}

	10% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0);
	}

	20% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	30% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0);
	}

	40% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	50% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0);
	}

	60% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	70% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0);
	}

	80% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/*--------------向右侧滑动一定距离-------------------*/
@-webkit-keyframes moveToRight1 {

	0%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 1;
		-webkit-transform: translate3d(-85px, 0, 0);
		transform: translate3d(-85px, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(120px, 0, 0);
		transform: translate3d(120px, 0, 0);
	}
}

/*--------------缩小放大后缩小至消失-------------------*/
@-webkit-keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}

	50%,
	55% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}
}

/*--------------上下跳动后向下滑出-------------------*/
@-webkit-keyframes bounceOutDown {
	20% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0);
	}

	40%,
	45% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 300px, 0);
		transform: translate3d(0, 300px, 0);
	}
}

/*--------------向左侧滑出-------------------*/
@-webkit-keyframes bounceOutLeft {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(20px, 0, 0);
		transform: translate3d(20px, 0, 0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(-200px, 0, 0);
		transform: translate3d(-200px, 0, 0);
	}
}

/*--------------向右侧滑出-------------------*/
@-webkit-keyframes bounceOutRight {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(200px, 0, 0);
		transform: translate3d(200px, 0, 0);
	}
}

/*--------------向上滑出-------------------*/
@-webkit-keyframes bounceOutUp {
	20% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	40%,
	45% {
		opacity: 1;
		-webkit-transform: translate3d(0, 20px, 0);
		transform: translate3d(0, 20px, 0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -200px, 0);
		transform: translate3d(0, -200px, 0);
	}
}

/*--------------淡入-------------------*/
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*--------------从左上角滑入-------------------*/
@-webkit-keyframes fadeIn1 {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(-300px, 0, 0) scale(0.4)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px, 100px, 0) scale(1)
	}
}

@-webkit-keyframes waterMove {
	0% {
		background-position: 0, 0;
	}

	100% {
		background-position: 4000%, 0;
	}
}

/*--------------自右向左滑入1-------------------*/
@-webkit-keyframes fadeFromLeft {
	0% {
		-webkit-transform: translate3d(-100px, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*--------------自左向右滑入1-------------------*/
@-webkit-keyframes fadeFromRight {
	0% {
		-webkit-transform: translate3d(100px, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*--------------自上向下滑入1-------------------*/
@-webkit-keyframes fadeFromTop {
	0% {
		-webkit-transform: translate3d(0, -100px, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*--------------自下向上滑入1-------------------*/
@-webkit-keyframes fadeFromBottom {
	0% {
		-webkit-transform: translate3d(0, 100px, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*--------------自上向下滑入2-------------------*/
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}




/*--------------自上向下滑入-------------------*/
@-webkit-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -200px, 0);
		transform: translate3d(0, -200px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------从左侧淡入-------------------*/
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-40px, 0, 0);
		transform: translate3d(-40px, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------从左侧渐变滑入-------------------*/
@-webkit-keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-200px, 0, 0);
		transform: translate3d(-200px, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------从左上角淡入-------------------*/
@-webkit-keyframes fadeInTL {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, -100%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none
	}
}

/*--------------从右上角淡入-------------------*/
@-webkit-keyframes fadeInTR {
	0% {
		opacity: 0;
		transform: translate3d(100%, -100%, 0)
	}

	100% {
		opacity: 1;
		transform: none
	}
}

/*--------------从左下角淡入-------------------*/
@-webkit-keyframes fadeInBL {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-20px, 20px, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none
	}
}

/*--------------从右上角淡入-------------------*/
@-webkit-keyframes fadeInBR {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(20px, -20px, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none
	}
}

/*--------------从右侧淡入-------------------*/
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(40px, 0, 0);
		transform: translate3d(40px, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------从右侧滑动淡入-------------------*/
@-webkit-keyframes fadeInRightBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(200px, 0, 0);
		transform: translate3d(200px, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------自下向上淡入-------------------*/
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------淡出-------------------*/
@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/*--------------向下淡出-------------------*/
@-webkit-keyframes fadeOutDown {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
}

/*--------------向下滑动淡出-------------------*/
@-webkit-keyframes fadeOutDownBig {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 200px, 0);
		transform: translate3d(0, 200px, 0);
	}
}

/*--------------向左侧滑动淡出-------------------*/
@-webkit-keyframes fadeOutLeft {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

/*--------------向右侧淡出-------------------*/
@-webkit-keyframes fadeOutRight {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

/*--------------向上淡出-------------------*/
@-webkit-keyframes fadeOutUp {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
}

/*--------------放大旋转后恢复-------------------*/
@-webkit-keyframes flip1 {
	0% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	40% {
		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

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

	80% {
		-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
		transform: perspective(400px) scale3d(.95, .95, .95);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
}

/*--------------以X轴旋转出现-------------------*/
@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}

	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

/*--------------以Y轴旋转出现-------------------*/
@-webkit-keyframes flipInY {
	0% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}

	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

/*--------------以X轴旋转淡出-------------------*/
@-webkit-keyframes flipOutX {
	0% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}

	30% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		opacity: 0;
	}
}

/*--------------以Y轴旋转淡出-------------------*/
@-webkit-keyframes flipOutY {
	0% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}

	30% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		opacity: 0;
	}
}

/*--------------从右侧倾斜淡入-------------------*/
@-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;
	}
}

/*--------------向右侧倾斜淡出-------------------*/
@-webkit-keyframes lightSpeedOut {
	0% {
		opacity: 1;
	}

	100% {
		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
		transform: translate3d(100%, 0, 0) skewX(30deg);
		opacity: 0;
	}
}

/*--------------顺时针旋转出现-------------------*/
@-webkit-keyframes rotateIn {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 0, 1, -200deg);
		transform: rotate3d(0, 0, 1, -200deg);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

/*--------------顺时针旋转-------------------*/
@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

/*--------------以左下角为原点顺时针旋转45度淡入-------------------*/
@-webkit-keyframes rotateInDownLeft {
	0% {
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
		-webkit-transform: rotate3d(0, 0, 1, -45deg);
		transform: rotate3d(0, 0, 1, -45deg);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

/*--------------以右下角为原点逆时针旋转45度淡入-------------------*/
@-webkit-keyframes rotateInDownRight {
	0% {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

/*--------------以左下角为原点向上逆时针旋转45度淡入-------------------*/
@-webkit-keyframes rotateInUpLeft {
	0% {
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

/*--------------以右下角为原点向上顺时针旋转45度淡入-------------------*/
@-webkit-keyframes rotateInUpRight {
	0% {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: rotate3d(0, 0, 1, -90deg);
		transform: rotate3d(0, 0, 1, -90deg);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

/*--------------顺时针旋转淡出------------------*/
@-webkit-keyframes rotateOut {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		opacity: 1;
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 0, 1, 200deg);
		transform: rotate3d(0, 0, 1, 200deg);
		opacity: 0;
	}
}

/*--------------顺时针旋转45度淡出-------------------*/
@-webkit-keyframes rotateOutDownLeft {
	0% {
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
		opacity: 1;
	}

	100% {
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0;
	}
}

/*--------------逆时针旋转45度淡出-------------------*/
@-webkit-keyframes rotateOutDownRight {
	0% {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		opacity: 1;
	}

	100% {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: rotate3d(0, 0, 1, -45deg);
		transform: rotate3d(0, 0, 1, -45deg);
		opacity: 0;
	}
}

/*--------------悬挂后掉下去-------------------*/
@-webkit-keyframes hinge {
	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: rotate3d(0, 0, 1, 80deg);
		transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 60deg);
		transform: rotate3d(0, 0, 1, 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;
	}

	100% {
		-webkit-transform: translate3d(0, 700px, 0);
		transform: translate3d(0, 700px, 0);
		opacity: 0;
	}
}

/*--------------从左侧顺时针旋转淡入-------------------*/
@-webkit-keyframes rollIn {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*--------------向右侧旋转淡出-------------------*/
@-webkit-keyframes rollOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
	}
}

/*--------------从小到大淡入------------------*/
@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1);
		transform: scale3d(.1, .1, .1);
	}

	100% {

		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity: 1;

	}
}

/*--------------自上向下弹入-------------------*/
@-webkit-keyframes zoomInDown {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

/*--------------从左侧放大出现-------------------*/
@-webkit-keyframes zoomInLeft {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

/*--------------从右侧放大出现-------------------*/
@-webkit-keyframes zoomInRight {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
		transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
		transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

/*--------------倾斜扭动-------------------*/
@-webkit-keyframes skewX {
	0% {
		-webkit-transform: skew(4deg, 4deg)
	}

	50% {
		-webkit-transform: skew(0deg, 0deg)
	}

	100% {
		-webkit-transform: skew(-2deg, -2deg)
	}
}

/*自下向上放大出现*/
@-webkit-keyframes zoomInUp {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

/*--------------由大到小淡入-------------------*/
@-webkit-keyframes zoomOut {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(1.5, 1.5, 1.5);
		transform: scale3d(1.5, 1.5, 1.5);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/*--------------缩小后向下滑出-------------------*/
@-webkit-keyframes zoomOutDown {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

/*--------------缩小后向左滑出-------------------*/
@-webkit-keyframes zoomOutLeft {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
		transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
		transform: scale(.1) translate3d(-2000px, 0, 0);
		-webkit-transform-origin: left center;
		transform-origin: left center;
	}
}

/*--------------缩小后向右滑出-------------------*/
@-webkit-keyframes zoomOutRight {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
		transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
		transform: scale(.1) translate3d(2000px, 0, 0);
		-webkit-transform-origin: right center;
		transform-origin: right center;
	}
}

/*--------------缩小后向上滑出-------------------*/
@-webkit-keyframes zoomOutUp {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

/*--------------自上向下滑入-------------------*/
@-webkit-keyframes slideInDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes slideFromDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}


/*--------------从左侧滑入-------------------*/
@-webkit-keyframes slideInLeft {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes slideFromLeft {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/*--------------从右侧滑入-------------------*/
@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes slideFromRight {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}


/*--------------自上向下滑入-------------------*/
@-webkit-keyframes slideInUp {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}


/*--------------自上向下滑入-------------------*/
@-webkit-keyframes slideFromUp {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/*--------------向下滑动一定距离-------------------*/
@-webkit-keyframes slideOutDown {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		visibility: hidden;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
}


/*向左侧滑动一定距离*/
@-webkit-keyframes slideOutLeft {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		visibility: hidden;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}


/* Blur In */
@-webkit-keyframes blurIn {
	from {
		opacity: 0;
		-webkit-filter: blur(20px);
		filter: blur(20px);
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	to {
		opacity: 1;
		-webkit-filter: blur(0);
		filter: blur(0);
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes blurIn {
	from {
		opacity: 0;
		-webkit-filter: blur(20px);
		filter: blur(20px);
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	to {
		opacity: 1;
		-webkit-filter: blur(0);
		filter: blur(0);
		-webkit-transform: none;
		transform: none;
	}
}