Embedded Text Animation

In this tutorial, you will learn how to create an embedded text effect animation using CSS. Watch the video below for a detailed tutorial.

HTML

<div class="content">
    <span>L</span>
    <span>O</span>
    <span>R</span>
    <span>E</span>
    <span>M</span>
</div>

CSS

body {
	background-color: #57ACD3;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.content span {
	color: #57ACD3;
	font-weight: bold;
	font-family: 'Arial', sans-serif;
	font-size: 5rem;
	animation: animate 4s ease-in-out infinite;
}

@keyframes  animate {
	0% {
		transform: translate(-30%, 0);
	}
	50% {
		text-shadow: 0 0 50px rgba(58, 58, 58);
	}
	100% {
		transform: translate(30%, 0);
	}
}

.content span:nth-child(2) {
	animation-delay: 0.3s;
}

.content span:nth-child(3) {
	animation-delay: 0.6s;
}

.content span:nth-child(4) {
	animation-delay: 0.9s;
}

.content span:nth-child(5) {
	animation-delay: 2.2s;
}