Open In App

Fading Text Animation Effect Using CSS3

Improve
Improve
Like Article
Like
Save
Share
Report

The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in CSS3.

HTML code: In this section, we will make the layout of the web-page.

  • index.html

HTML




<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
</head>
  
<body>
    <div>
        <h2>GeeksforGeeks</h2>
    </div>
</body>
  
</html>


CSS code: In this section, we will add some CSS properties to create a fading text effect.

CSS




<style>
    * {
        margin: 0;
        padding: 0;
  
    }
  
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: green;
        animation-name: gfg;
        animation-duration: 4s;
    }
  
    h2 {
        position: relative;
        margin: 0;
        font-size: 5em;
        font-weight: 750;
        color: white;
        z-index: 1;
        overflow: hidden;
    }
  
    h2:before {
        content: '';
        position: absolute;
        right: 130%;
        width: 130%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent 0%, green 5%, green 100%);
              
        animation: geeksforgeeks 5s linear backwards;
    }
  
    @keyframes geeksforgeeks {
        from {
            right: 130%
        }
  
        to {
            right: -10%;
        }
    }
</style>


Complete Code: In this section, we will combine the above two sections to create a fading text effect using HTML5 and CSS3.

HTML




<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <style>
        * {
            margin: 0;
            padding: 0;
  
        }
  
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: green;
            animation-name: gfg;
            animation-duration: 4s;
        }
  
        h2 {
            position: relative;
            margin: 0;
            font-size: 5em;
            font-weight: 750;
            color: white;
            z-index: 1;
            overflow: hidden;
        }
  
        h2:before {
            content: '';
            position: absolute;
            right: 130%;
            width: 130%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent 0%, green 5%, green 100%);
                  
            animation: geeksforgeeks 5s linear backwards;
        }
  
        @keyframes geeksforgeeks {
            from {
                right: 130%
            }
  
            to {
                right: -10%;
            }
        }
    </style>
</head>
  
<body>
    <div>
        <h2>GeeksforGeeks</h2>
    </div>
</body>
  
</html>


Output:



Last Updated : 18 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads