How to Create Loading Blur Text Animation Effect using HTML and CSS ?
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:
Please Login to comment...