O efeito de animação de texto esmaecido é um dos efeitos mais exigentes no design de UI / UX. Esse efeito pode ser obtido usando HTML5 e CSS3. No efeito de texto esmaecido, sempre que carregamos a janela, o texto começa a desaparecer lentamente. Podemos implementar esse efeito usando a propriedade de animação em CSS3.

Código HTML: Nesta seção, faremos o layout da página web.

  • index.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>

Código CSS: nesta seção, adicionaremos algumas propriedades CSS para criar um efeito de texto esmaecido.

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

Código completo: nesta seção, combinaremos as duas seções acima para criar um efeito de texto esmaecido usando HTML5 e CSS3.

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

Saída: