Related Articles

Related Articles

How to create text-reveal effect using HTML and CSS ?
  • Last Updated : 20 May, 2020

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


CSS Code: For CSS, follow theses 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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Complete Code: It is the combination of the above two section of codes.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :