How to create text-reveal effect using HTML and CSS ? - GeeksforGeeks

02 Nov, 2021
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 up to your creativity that how you want the text to reveal. We will look at a basic and easy way to get started.Approach: The approach is to use keyframes to animate frames to slowly reveal the text frame-wise.HTML Code: In HTML, we have used <h1> tag wrapped inside a <div> tag.  
html
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <title>Text Reveal Animation</title></head> <body>    <div class="geeks">        <h1>GeeksforGeeks</h1>    </div></body> </html>
CSS Code: For CSS, follow these steps:  
Step 1: First we have done some basic styling like providing a background color, aligning text to center, etc.
Step 2: Then use animation property with identifier named as animate.
Step 3: Now use keyframes to animate each frame and set different height and width for each frame.
Tip: You can change the value of height and width used in each frame to reveal text in a different way. 
CSS
<style>    body {        background: green;    }     .geeks {        width: 20%;        top: 50%;        position: absolute;        left: 40%;        border-bottom: 5px solid white;        overflow: hidden;        animation: animate 2s linear forwards;    }     .geeks h1 {        color: white;    }     @keyframes animate {        0% {            width: 0px;            height: 0px;        }        30% {            width: 50px;            height: 0px;        }        60% {            width: 50px;            height: 80px;        }    }</style>
Complete Code: It is the combination of the above two section of codes. 
html
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <title>Text Reveal Animation</title>     <style>        body {            background: green;        }         .geeks {            width: 20%;            top: 50%;            position: absolute;            left: 40%;            border-bottom: 5px solid white;            overflow: hidden;            animation: animate 2s linear forwards;        }         .geeks h1 {            color: white;        }         @keyframes animate {            0% {                width: 0px;                height: 0px;            }            30% {                width: 50px;                height: 0px;            }            60% {                width: 50px;                height: 80px;            }        }    </style></head> <body>    <div class="geeks">        <h1>GeeksforGeeks</h1>    </div></body> </html>
Output:  
One more animated method
HTML Code: The following code snippet creates HTML div element which contains the text for modification.
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Collecting Data</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">   </head><body class="container" style="margin-top: 50px; width: 50% height:auto; "> <div class="text-typing">    <p>Geeks For Geeks </p>  </div></html>
CSS Code: For CSS, follow theses steps:
Step 1: First we have done some basic styling like providing a background color, aligning items to center, etc.
Step 2: Then use animation property with identifier named as text-typing p.
Step 3: Now use keyframes to animate from width 0 to 100%..
HTML
<style >      body {  margin:0px;  height:100vh;  display:flex;  align-items:center;  justify-content:center;  background:#ddd;}.text-typing {  padding:20px 30px;  background:#f5f5f5;  font-size:35px;  font-family:monospace;  border-radius:50px;}.text-typing p {  margin:0px;  white-space:nowrap;  overflow:hidden;  animation:typing 4s steps(22,end) forwards,            blink 1s infinite;}@keyframes typing {  0% { width:0% }  100% { width:100% }}@keyframes blink {  0%,100% {    border-right:2px solid transparent;  }  50% {    border-right:2px solid #222;  }}     </style>
Complete Code: It is the combination of the above two section of codes.
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Collecting Data</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">    <style >      body {  margin:0px;  height:100vh;  display:flex;  align-items:center;  justify-content:center;  background:#ddd;}.text-typing {  padding:20px 30px;  background:#f5f5f5;  font-size:35px;  font-family:monospace;  border-radius:50px;}.text-typing p {  margin:0px;  white-space:nowrap;  overflow:hidden;  animation:typing 4s steps(22,end) forwards,            blink 1s infinite;}@keyframes typing {  0% { width:0% }  100% { width:100% }}@keyframes blink {  0%,100% {    border-right:2px solid transparent;  }  50% {    border-right:2px solid #222;  }}     </style></head><body class="container" style="margin-top: 50px; width: 50% height:auto; "> <div class="text-typing">    <p>Geeks For Geeks </p>  </div></html>
Output
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
annianni
varshagumber28
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?