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

.fade-transverse-active {
	transition: all var(--page-transition-duration);
	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-leave {
	opacity: 0;
	transition: all 0.3s;
}

.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;
	}
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-5px);
	}

	60% {
		transform: translateY(-3px);
	}
}

@keyframes rootScaleOut {
	0% {
		transform: scale(1);
	}

	100% {
		border-radius: 24px;
		transform: perspective(1000px) scale(0.99);
		box-shadow: 0 0 500px 10px var(--colorPrimary);
		overflow: hidden;
	}
}