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

	100% {
		opacity: 1;
	}
}
/* 左侧进入 */
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/* 右侧进入 */
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/* 顶部进入 */
@keyframes fadeInTop {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/* 底部进入 */
@keyframes fadeInBottom {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/* 淡出 */
@keyframes fadeOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100%);
	}
}
/* 左右抖动 */
@keyframes shake {
	0% {
		transform: translateX(0rem);
	}
	10% {
		transform: translateX(0.1rem);
	}
	20% {
		transform: translateX(-0.1rem);
	}
	30% {
		transform: translateX(0.2rem);
	}
	40% {
		transform: translateX(-0.2rem);
	}
	50% {
		transform: translateX(0.2rem);
	}
	60% {
		transform: translateX(-0.2rem);
	}
	70% {
		transform: translateX(0.1rem);
	}
	80% {
		transform: translateX(-0.1rem);
	}
	90% {
		transform: translateX(0.1rem);
	}
	100% {
		transform: translateX(0rem);
	}
}
/* 由大到小 */
@keyframes reduce {
	from {
		transform: scale(3);
	}
	to {
		transform: scale(1);
	}
}
/* 先大再小 */
@keyframes telescoping {
	0% {
		transform: scale(0.1);
	}
	50% {
		transform: scale(2);
	}
	100% {
		transform: scale(1);
	}
}
/* 旋转 */
@keyframes rotate {
	0% {
		transform: rotate(360deg);
	}
	50% {
		transform: scale(180deg);
	}
	100% {
		transform: scale(0deg);
	}
}
/* 淡入 */
.fadeIn {
	transition: all 0.5s ease-in-out;
	animation: fadeIn 0.5s;
}
.fadeInLeft {
	transition: all 0.5s ease-in-out;
	animation: fadeInLeft 0.5s;
}
.fadeInRight {
	transition: all 0.5s ease-in-out;
	animation: fadeInRight 0.5s;
}
.fadeInTop {
	transition: all 0.5s ease-in-out;
	animation: fadeInTop 0.5s;
}
.fadeInBottom {
	transition: all 0.5s ease-in-out;
	animation: fadeInBottom 0.5s;
}
/* 淡出 */
.fadeOut {
	transition: all 0.5s ease-in-out;
	animation: fadeOut 0.5s;
}
/* 左右抖动 */
.shake {
	transition: all 0.5s ease-in-out;
	animation: shake 0.5s;
}
/* 由大到小 */
.reduce {
	transition: all 0.5s ease-in-out;
	animation: reduce 0.5s;
}
/* 先大再小 */
.telescoping {
	transition: all 0.5s ease-in-out;
	animation: telescoping 0.5s;
}
/* 旋转 */
.rotate {
	transition: all 0.5s ease-in-out;
	animation: rotate 0.5s;
}