/*淡入淡出*/
			
@-webkit-keyframes fade-up1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
	
}

@-webkit-keyframes fade-up2 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-down2 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-down1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*上下连续翻页*/

@-webkit-keyframes coherentvertical-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
}

@-webkit-keyframes coherentvertical-up2 {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coherentvertical-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
}

@-webkit-keyframes coherentvertical-down2 {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*左右连续翻页*/

@-webkit-keyframes coherenthorizontal-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
}

@-webkit-keyframes coherenthorizontal-up2 {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coherenthorizontal-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
}

@-webkit-keyframes coherenthorizontal-down2 {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*上下惯性翻页*/

@-webkit-keyframes inertiavertical-up1 {
	0% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiavertical-up2 {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes inertiavertical-down1 {
	0% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiavertical-down2 {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*左右惯性翻页*/

@-webkit-keyframes inertiahorizontal-up1 {
	0% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiahorizontal-up2 {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes inertiahorizontal-down1 {
	0% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiahorizontal-down2 {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*上下覆盖翻页*/

@-webkit-keyframes coververtical-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coververtical-up2 {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coververtical-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coververtical-down2 {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*左右覆盖翻页*/

@-webkit-keyframes coverhorizontal-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coverhorizontal-up2 {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coverhorizontal-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coverhorizontal-down2 {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*上下推出翻页*/

@-webkit-keyframes launchvertical-up1 {
	0% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
	100% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,-90deg);
	}
}

@-webkit-keyframes launchvertical-up2 {
	0% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
	}
	100% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
}

@-webkit-keyframes launchvertical-down1 {
	0% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
	100% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
	}
}

@-webkit-keyframes launchvertical-down2 {
	0% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,-90deg);
	}
	100% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
}

/*左右推出翻页*/

@-webkit-keyframes launchhorizontal-up1 {
	0% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
	100% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,90deg);
	}
}

@-webkit-keyframes launchhorizontal-up2 {
	0% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,-90deg);
	}
	100% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
}

@-webkit-keyframes launchhorizontal-down1 {
	0% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
	100% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,-90deg);
	}
}

@-webkit-keyframes launchhorizontal-down2 {
	0% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,90deg);
	}
	100% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
}

/*左右交换翻页*/

@-webkit-keyframes exchange-up1 {
	0% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes exchange-up2 {
	0% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes exchange-down1 {
	0% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes exchange-down2 {
	0% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}

/*3D翻页*/

@-webkit-keyframes cube-up1 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(90deg) translate3d(0, 0, calc(100vh));
		
	}
}

@-webkit-keyframes cube-up2 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(-90deg) translate3d(0, 0, calc(100vh));	
	}
	100% {
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes cube-down1 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
		
	}
	100% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(-90deg) translate3d(0, 0, calc(100vh));
		
	}
}

@-webkit-keyframes cube-down2 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3)  rotateX(90deg) translate3d(0, 0, calc(100vh));
	}
	100% {
		
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
	}
}