Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 27 Apr, 2020

The blur text animation is known as the Smoky effect and it is used to give our text a blurry animation. The text blurs linearly in one direction and then reappears.

Approach: The approach of this article is quite simple. We are animating the blur effect using the blur() function. Then we are using n-th child property to apply the animation delay. Now let’s dive straight into the code.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




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

  • Step-1: The first step is simple we have aligned our text to center and provide a background to our body.
  • Step-2: Then we have provided a linear animation with keyframe identifier as animate.
  • Step-3: Now we use keyframes to apply blur function to different frames of the animation.
  • Step-4: 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.




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

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




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
          
    <title>Document</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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!