Template:Appearing Text Effect/styles.css

/* Alignment Classes */
.position-left {
	margin-right: auto;
}

.position-right {
	margin-left: auto;
}

.position-center {
	margin-left: auto;
	margin-right: auto;
}

/* Wrapper and Base Animation Classes */
.appear-effect {
	width: fit-content;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
}

/* Directional Fade Animations */
@keyframes fade-center {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fade-left-to-right {
	0% {
		opacity: 0;
		transform: translateX(-50%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fade-right-to-left {
	0% {
		opacity: 0;
		transform: translateX(50%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Appear and Fade Away Motion */
@keyframes appear-disappear {
	0% {
		display: block;
		opacity: 0;
		transform: scale(0.95);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.05);
	}
}

/* Directional Class Bindings */
.fade-center {
	animation-name: fade-center;
}

.fade-ltr {
	animation-name: fade-left-to-right;
}

.fade-rtl {
	animation-name: fade-right-to-left;
}

.fade-away {
	display: none;
}

/* Fade After Appear */
.fade-center.fade-away {
	animation-name: fade-center, appear-disappear;
	animation-fill-mode: both;
}

.fade-ltr.fade-away {
	animation-name: fade-left-to-right, appear-disappear;
	animation-fill-mode: both;
}

.fade-rtl.fade-away {
	animation-name: fade-right-to-left, appear-disappear;
	animation-fill-mode: both;
}