animations.css

@keyframes appear {
	0% {	
		opacity: 0;
		transform: scaleY(0);
		margin-top: -6em;
	}
	100% {
		opacity: 1;
	}
}

.appear {
	animation: appear 0.35s ease-out forwards;
	overflow: hidden;
}

@keyframes slide-left {
	0% {
		opacity: 0;
		transform: scaleX(0);
		margin-left: -16em;
	}
	100% {
		opacity: 1;
	}
}

.slide-left {
	animation: slide-left 0.4s forwards;
}

@keyframes delete-right {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scaleX(0);
	}
}

.delete-right {
	animation: delete-right 0.3s forwards;
}

@keyframes fadein {
	from {
		opacity: 0;
		filter: blur(0.32em);
		transform: scale(1.05);
	}
}

.fadein {
	animation: fadein 0.3s forwards;
}

.fadeout {
	animation: fadein 0.3s reverse;
}