:root {
	--time-fade: 0.3s;
	--time-slideDown: 0.3s;
}

/* fade */
.fade-enter-active {
	animation: fade var(--time-fade);
}

.fade-leave-active {
	animation: fade var(--time-fade) reverse;
}

/* slideDown */
.slideDown-enter-active {
	animation: growDownEnter var(--time-slideDown);
	-webkit-animation: growDownEnter var(--time-slideDown);
}

.slideDown-leave-active {
	animation: growDownLeave var(--time-slideDown);
	-webkit-animation: growDownLeave var(--time-slideDown);
}

/* fade */
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* growDown */
@keyframes growDownEnter {
	0% {
		transform: translateY(-0.5vh);
		opacity: 0;
	}
	100% {
		transform: translateY(0vh);
		opacity: 1;
	}
}

@keyframes growDownLeave {
	0% {
		transform: translateY(0vh);
		opacity: 1;
	}
	100% {
		transform: translateY(0.5vh);
		opacity: 0;
	}
}