@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;
}

@keyframes slideInLeft {
	from {
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

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

.slideInLeft {
	animation-name: slideInLeft;
}

@keyframes slideInRight {
	from {
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}

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

.slideInRight {
	animation-name: slideInRight;
}

@keyframes fadeOutUpBig {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translate3d(0, -2000px, 0);
	}
}

.fadeOutUpBig {
	animation-name: fadeOutUpBig;
}

@keyframes fadeInUpBig {
	from {
		opacity: 0;
		transform: translate3d(0, 2000px, 0);
	}

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

.fadeInUpBig {
	animation-name: fadeInUpBig;
}

@keyframes flipInY {
	from {
		transform: rotate3d(0, 1, 0, 180deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}

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

@keyframes flipInX {
	// 0% {
	// 	transform: perspective(400px) rotateY(-90deg);
	// 	opacity: 0;
	// }
	// 50% {
	// 	transform: perspective(400px) rotateY(8deg);
	// 	opacity: 1;
	// }
	// 70% {
	// 	transform: perspective(400px) rotateY(-6deg);
	// }
	// 80% {
	// 	transform: perspective(400px) rotateY(4deg);
	// }
	// 90% {
	// 	transform: perspective(400px) rotateY(-2deg);
	// }
	// 100% {
	// 	transform: perspective(400px);
	// }
}

.flipInY {
	backface-visibility: visible !important;
	animation-name: flipInY;
}

.flipInX {
	animation: flipInX 0.7s both ease-in;
}