Open In App

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

Last Updated : 25 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

Output:


Next Article
How to create Shaky button using HTML and CSS?

S
sirohimukul1999
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox