@import './animate_base.less';

@keyframes backInUp {
	0% {
		transform: translateY(1500px) scale(0.7);
		opacity: 0.7;
	}

	80% {
		transform: translateY(0px) scale(0.7);
		opacity: 0.7;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.backInUp {
	animation-name: backInUp;
}

@keyframes backOutDown {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	20% {
		transform: translateY(0px) scale(0.7);
		opacity: 0.7;
	}

	100% {
		transform: translateY(1500px) scale(0.7);
		opacity: 0.7;
	}
}

.backOutDown {
	animation-name: backOutDown;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fadeInUp {
	animation-name: fadeInUp;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fadeInLeft {
	animation-name: fadeInLeft;
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fadeInRight {
	animation-name: fadeInRight;
}