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

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.

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.

Complete Code

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

Output: