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.
- 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.
Complete Code: In this section, we will combine both the above two sections to create a loading text animation effect.
- Loading Text Animation Effect using CSS
- How to Create a Dot loading Animation using HTML and CSS?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to Create Animation Loading Bar using CSS ?
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to make a glass/blur effect overlay using HTML and CSS ?
- How to show Page Loading div until the page has finished loading?
- Text Animation with changing the color of the text using HTML & CSS
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- Create a 3D Text Effect using HTML and CSS
- How to create text-reveal effect using HTML and CSS ?
- How to Create Engraved Text Effect using HTML and CSS ?
- How to Create Text Reveal Effect for Buttons using HTML and CSS ?
- Create a Gradient Text Effect using HTML and CSS
- How to create multilayered text effect using HTML and CSS?
- How to create text-fill animation using CSS ?
- How to Create Embossed Text Effect using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.