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

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.
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:
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS