1. Tutorials
  2. CSS
  3. Text Reveal Animation

Text Reveal Animation

In this tutorial, you will learn how to add a reveal animation to a text using. Watch the video below for a detailed tutorial.

HTML

<body>
  <h1>Winterwind Inc.</h1>
</body>

CSS

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

h1 {
	font-size: 4em;
	color: white;
	font-family: sans-serif;
	animation: h1-animation 0.9s cubic-bezier(0, 0, 0.2, 1) both;
	animation-iteration-count: 1;
}

@keyframes  h1-animation {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

h1:after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #57ACD3;
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation: h1-reveal 0.9s cubic-bezier(0, 0, 0.2, 1) both;
	animation-iteration-count: 1;
}

@keyframes  h1-reveal {
	0%, 50% {
		transform-origin: 0 50%;
	}
	60%, 100% {
		transform-origin: 100% 50%;
	}
	60% {
		transform: scaleX(1);
	}
	100% {
		transform: scaleX(0);
	}
}