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>

Output:

How to Create Jumping Text 3D Animation Effect using CSS ?

sirohimukul1999

Improve

Article Tags :

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

HTML Code

CSS Code

Complete Code

Similar Reads