How to Create Sliding Text Reveal Animation using HTML & CSS ?
Last Updated :
23 Jul, 2025
In this article, we will implement sliding text reveal animation which can be used in personal portfolios, websites, and even in YouTube introduction videos to add an extra edge to our videos so that it looks more interesting and eye-catchy at first instance and the best part is that we will do that using just HTML and CSS.
Approach: The animation will begin with the appearance of the first text, for example, we are taking the word as "GEEKSFORGEEKS", and then it will slide towards the left, and our second text that is: "A Computer Science Portal For Geeks" will reveal towards the right (If you're still confused, what the animation is all about, you can quickly scroll to the end of the page and see the output, for better understanding).
We will be using different keyframes to divide our animation into different stages so that it works smoothly.
Keyframes hold what styles the element will have at certain times. The following keyframes are used:
- @keyframes appear: In this keyframe, we will deal with the way the first text appears.
- @keyframes slide: In this keyframe, we will try to move the text in a sliding manner.
- @keyframes reveal: In this keyframe, we will reveal our second text.
Below is the implementation of the above approach.
Example: In this example, we will be going to use the above-defined properties to create the animation.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Text Reveal Animation</title>
</head>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
body {
font-family: Montserrat;
text-align: center;
color: #006600;
font-size: 34px;
padding-top: 40vh;
overflow: hidden;
}
div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
div:first-of-type {
animation: appear 6s infinite;
}
div:last-of-type {
animation: reveal 6s infinite;
}
div:last-of-type span {
font-size: 33px;
color: #808000;
animation: slide 6s infinite;
}
@keyframes appear {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes slide {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
@keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 655px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 655px;
}
}
</style>
<body>
<div>GEEKSFORGEEKS</div>
<div>
<span>A Computer Science Portal For Geeks</span>
</div>
</body>
</html>
Output:
Note: For other texts of different lengths the width and the font size of both the text should be changed accordingly.
Similar Reads
How to create text-reveal effect using HTML and CSS ? Text-reveal is a type of effect in which all the alphabets of the text are revealed one by one in some animated way. There are uncountable ways to animate text for this effect. It is up to your creativity how you want the text to reveal. We will look at a basic and easy way to get started. Table of
3 min read
How to Create Text Color Animation using HTML and CSS ? The text color can be changed according to the programmer’s choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS. Preview:Approach:Create an HTML file with a centered <div> containing an <h2> element.Use CSS to reset default
1 min read
How to Create Text Reveal Effect for Buttons using HTML and CSS ? Buttons are the most important user interface component for any website. It is very important to design the buttons in a creatively unique way. The text-reveal effect for a button is used when it is used to reveal some offer or exciting content for enhancing the user experience. Approach: The approa
2 min read
How to create text-fill animation using CSS ? A text-fill animation using CSS is a visual effect where the content of text gradually fills with a color, gradient, or pattern over time. This animation can create dynamic, eye-catching effects for headings or titles by adjusting properties like background-size, clip-path, or keyframe animations.Ap
2 min read
How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html
4 min read
How to Create Text Animation Effect using JavaScript ? Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a
2 min read