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 3 s linear infinite;
}
.geeks span:nth-child( 1 ) {
animation-delay: 0 s;
}
.geeks span:nth-child( 2 ) {
animation-delay: 0.1 s;
}
.geeks span:nth-child( 3 ) {
animation-delay: 0.2 s;
}
.geeks span:nth-child( 4 ) {
animation-delay: 0.3 s;
}
.geeks span:nth-child( 5 ) {
animation-delay: 0.4 s;
}
.geeks span:nth-child( 6 ) {
animation-delay: 0.5 s;
}
.geeks span:nth-child( 7 ) {
animation-delay: 0.6 s;
}
.geeks span:nth-child( 8 ) {
animation-delay: 0.9 s;
}
.geeks span:nth-child( 9 ) {
animation-delay: 0.8 s;
}
.geeks span:nth-child( 10 ) {
animation-delay: 0.9 s;
}
.geeks span:nth-child( 11 ) {
animation-delay: 1 s;
}
.geeks span:nth-child( 12 ) {
animation-delay: 1.1 s;
}
.geeks span:nth-child( 13 ) {
animation-delay: 1.2 s;
}
@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:
Last Updated :
27 Apr, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...