.ani-x-in {
	animation: x-in .5s ease-out forwards;
}

@keyframes x-in {
	from {
		transform: translateX(100vw);
	}

	to {
		transform: translateX(0);
	}
}

.ani-x-out {
	animation: x-out .5s ease-out forwards;
}

@keyframes x-out {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100vw);
	}
}

.ani-y1 {
	animation: y1 1s ease-out;
}

.ani-y-1 {
	animation: y-1 1s ease-out;
}

@keyframes y1 {
	from {
		transform: translateY(1rem);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes y-1 {
	from {
		transform: translateY(-1rem);
	}

	to {
		transform: translateY(0);
	}
}

.ani-sacle {
	animation: sacle 1s ease-out;
}

@keyframes sacle {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.1);
	}
}