1. Tutorials
  2. CSS
  3. Embedded Text Animation

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