index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            background-color: #212121;
        }

        div{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);    
        }
        li{
            list-style: none;
            float:left; 
            font-size: 15vh;
            font-weight: bold;
            color: #ffffff;
            animation: fumaca 3s linear;
        }

        li:nth-child(1){animation-delay: 1s;}
        li:nth-child(2){animation-delay: 1.25s;}
        li:nth-child(3){animation-delay: 1.5s;}
        li:nth-child(4){animation-delay: 1.75s;}
        li:nth-child(5){animation-delay: 2s;}
        li:nth-child(6){animation-delay: 2.25s;}
        li:nth-child(7){animation-delay: 2.5s;}
        li:nth-child(8){animation-delay: 2.75s;}
        li:nth-child(9){animation-delay: 3s;}

        @keyframes fumaca {
            0%{filter: blur(0px);}
            50%{filter: blur(200px);}
            100%{filter: blur(0px);}
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>T</li>
            <li>h</li>
            <li>e</li>
            <li>C</li>
            <li>o</li>
            <li>y</li>
            <li>o</li>
            <li>t</li>
            <li>e</li>
        </ul>
    </div>
</body>
</html>