How to Create Loading Blur Text Animation Effect using HTML and CSS?

Last Updated : 25 Sep, 2024

The blur text animation is known as the Smoky effect and is used to give the text a blurry animation. The text blurs linearly in one direction and then reappears. In this article, we will create a loading blur text animation effect using HTML and CSS.

Approach: The approach to create loading blur text animation is quite simple. We are animating the blur effect using the blur() function. Then we are using n-th child selector to select and apply the animation delay.

HTML Code

We have created a div element and the loading text characters are wrapped inside a span element.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks</title>
</head>

<body>
    <div class="geeks">
        <span>G</span>
        <span>e</span>
        <span>e</span>
        <span>k</span>
        <span>s</span>
        <span>f</span>
        <span>o</span>
        <span>r</span>
        <span>G</span>
        <span>e</span>
        <span>e</span>
        <span>k</span>
        <span>s</span>
    </div>
</body>

</html>

CSS Code

The first step is simple we have aligned our text to center and provide a background to our body.
Then we have provided a linear animation with keyframe identifier as animate.
Now we use keyframes to apply blur function to different frames of the animation.
The final step is the application of n-th child concept to provide an animation delay to each character so that only one character gets blurred at one point of time.

CSS

body {
    margin: 0;
    padding: 0;
    background: green;
}

.geeks {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 5px;
}

.geeks span {
    animation: animate 3s linear infinite;
}

.geeks span:nth-child(1) {
    animation-delay: 0s;
}

.geeks span:nth-child(2) {
    animation-delay: 0.1s;
}

.geeks span:nth-child(3) {
    animation-delay: 0.2s;
}

.geeks span:nth-child(4) {
    animation-delay: 0.3s;
}

.geeks span:nth-child(5) {
    animation-delay: 0.4s;
}

.geeks span:nth-child(6) {
    animation-delay: 0.5s;
}

.geeks span:nth-child(7) {
    animation-delay: 0.6s;
}

.geeks span:nth-child(8) {
    animation-delay: 0.9s;
}

.geeks span:nth-child(9) {
    animation-delay: 0.8s;
}

.geeks span:nth-child(10) {
    animation-delay: 0.9s;
}

.geeks span:nth-child(11) {
    animation-delay: 1s;
}

.geeks span:nth-child(12) {
    animation-delay: 1.1s;
}

.geeks span:nth-child(13) {
    animation-delay: 1.2s;
}

@keyframes animate {
    0% {
        filter: blur(0);
    }

    40% {
        filter: blur(20px);
    }

    80% {
        filter: blur(0);
    }

    100% {
        filter: blur(0);
    }
}

Complete Code

In this section, we will combine both the above two code sections to create a loading text animation effect.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />

    <title>
        Loading Blur Text Animation 
        Effect using HTML and CSS
    </title>

    <style>
        body {
            margin: 0;
            padding: 0;
            background: green;
        }

        .geeks {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            font-weight: 800;
            letter-spacing: 5px;
        }

        .geeks span {
            animation: animate 3s linear infinite;
        }

        .geeks span:nth-child(1) {
            animation-delay: 0s;
        }

        .geeks span:nth-child(2) {
            animation-delay: 0.1s;
        }

        .geeks span:nth-child(3) {
            animation-delay: 0.2s;
        }

        .geeks span:nth-child(4) {
            animation-delay: 0.3s;
        }

        .geeks span:nth-child(5) {
            animation-delay: 0.4s;
        }

        .geeks span:nth-child(6) {
            animation-delay: 0.5s;
        }

        .geeks span:nth-child(7) {
            animation-delay: 0.6s;
        }

        .geeks span:nth-child(8) {
            animation-delay: 0.9s;
        }

        .geeks span:nth-child(9) {
            animation-delay: 0.8s;
        }

        .geeks span:nth-child(10) {
            animation-delay: 0.9s;
        }

        .geeks span:nth-child(11) {
            animation-delay: 1s;
        }

        .geeks span:nth-child(12) {
            animation-delay: 1.1s;
        }

        .geeks span:nth-child(13) {
            animation-delay: 1.2s;
        }

        @keyframes animate {
            0% {
                filter: blur(0);
            }

            40% {
                filter: blur(20px);
            }

            80% {
                filter: blur(0);
            }

            100% {
                filter: blur(0);
            }
        }
    </style>
</head>

<body>
    <div class="geeks">
        <span>G</span>
        <span>e</span>
        <span>e</span>
        <span>k</span>
        <span>s</span>
        <span>f</span>
        <span>o</span>
        <span>r</span>
        <span>G</span>
        <span>e</span>
        <span>e</span>
        <span>k</span>
        <span>s</span>
    </div>
</body>

</html>