/* 左侧弹出 */
@keyframes lightSpeedInLeft {
	from {
		transform: translate3d(-100%, 0, 0) skewX(30deg);
		opacity: 0;
	}

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

	80% {
		transform: skewX(5deg);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}
/* 右侧弹出 */
@keyframes lightSpeedInRight {
	from {
		transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0;
	}

	60% {
		transform: skewX(20deg);
		opacity: 1;
	}

	80% {
		transform: skewX(-5deg);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}
/* 淡入 */
@keyframes fadeTo {
	from {
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		opacity: 0.4;
	}

	60% {
		opacity: 0.6;
	}

	80% {
		opacity: 0.8;
	}

	to {
		opacity: 1;
	}
}
.page-enter-active {
	animation: fadeTo 0.5s;
	animation-timing-function: ease-out;
}
/* 弹跳 */
@keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

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

	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

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

	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
/* 从小变大 */
@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}
/* 页面动画-从左侧弹出 */
.animationL {
	animation: 1s lightSpeedInLeft 1;
}
/* 页面动画-从右侧弹出 */
.animationR {
	animation: 1s lightSpeedInRight 1;
}