.fade-enter-active,
.fade-leave-active {
	transition: opacity 2s ease;
}

/* .fade-enter-active {
	transition-delay: 0.5s;
} */

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
	opacity: 1;
}

/* .slide-enter-active,
.slide-leave-active {
	transition: all 0.75s ease-out;
}
.slide-enter-to {
	position: absolute;
	right: 0;
}
.slide-enter-from {
	position: absolute;
	right: -100%;
}
.slide-leave-to {
	position: absolute;
	left: -100%;
}
.slide-leave-from {
	position: absolute;
	left: 0;
} */

.slide-enter-active,
.slide-leave-active,
.slide-over-enter-active,
.slide-over-leave-active {
	position: absolute;
	transition: all 2s ease;
}
.slide-enter-from,
.slide-over-enter-from {
	left: 100%;
}
.slide-enter-to,
.slide-over-enter-to {
	left: 0%;
}
.slide-leave-from {
	left: 0%;
}
.slide-leave-to {
	left: -100%;
}

.scale-enter-active,
.scale-leave-active {
	transition: all 2s ease;
}
.scale-enter-from,
.scale-leave-to {
	opacity: 0;
	transform: scale(0.9);
}

.slide-scale-enter-active,
.slide-scale-leave-active {
	position: absolute;
	transition: all 2s ease;
}
.slide-scale-enter-from {
	left: 100%;
}
.slide-scale-enter-to {
	left: 0%;
}
.slide-scale-leave-from {
	transform: scale(1);
}
.slide-scale-leave-to {
	transform: scale(0.5);
}

.zoom-enter-active,
.zoom-leave-active {
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: zoom;
}

.zoom-leave-active {
	animation-direction: reverse;
}

@keyframes zoom {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	100% {
		opacity: 1;
	}
}

.slide-fade-enter-active {
	transition: all 2s ease-out;
}

.slide-fade-leave-active {
	transition: all 2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
	transform: translateX(20px);
	opacity: 0;
}