comty/packages/app/src/theme/animations.less

.fade-transverse-active {
	transition: all 250ms;
	height: fit-content;
	width: 100%;
}

.fade-transverse-enter {
	opacity: 0;
	transform: translateX(-30px);
}

.fade-transverse-leave {
	opacity: 0;
	transform: translateX(30px);
}

.fade-scale-leave-active,
.fade-scale-enter-active {
	transition: all 0.3s;
}

.fade-scale-enter {
	opacity: 0;
	transform: scale(1.2);
}

.fade-scale-leave {
	opacity: 0;
	transform: scale(0.8);
}

.fade-opacity-active {
	transition: all 250ms;
	opacity: 1;
}

.fade-opacity-leave {
	opacity: 0;
}

.fade-opacity-enter {
	opacity: 1;
}

.transverse-enter {
	animation: transverse-enter 0.3s ease-in-out forwards;
}

.transverse-out {
	animation: transverse-out 0.3s ease-in-out forwards;
}

@keyframes transverse-enter {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes transverse-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(30px);
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes desappear {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}