Text switching animation using CSS

Last Updated : 05 Aug, 2024

Text Switching animation is an essential part of modern web engagement concepts. There are many types of Text Switching animation, depending on your imagination as well. Here in this tutorial, we will be learning to transition the words with a blur effect. The words come from the front blurring out the words which are behind until after a second they disappear. Here we are doing this for text, the next level of the same would be to transition the images of a carousel like the text.

Check out this example below:

Approach:

For the carousel, the loop must be of an infinite time period.
Make an outer div with the class name of the container to center the child elements and also to place the child items relative to it.
Add a margin to the top and left side to center the child items, in this case, text.
Wrap the text inside a div with the class name of the word and animate it for the infinite time period.
Add a delay to each child element to animate it with some time in between otherwise all the items will be displayed at the same time.
At last, use the keyframes to add the blur effect at an appropriate opacity level.
Yes, this is that simple!

The syntax for Keyframes:

@keyframes animation_name {
  keyframes-selector {
   css-styles;
 }
}

HTML Code: Making an outer container and adding each word inside a separate div to animate them separately.

Note: If you have multiple inside a single element to display at once, keep the animation duration of the next element a little late and blur the long element a little early in keyframes.

HTML

<div class="container">     <div class="word">GeeksForGeeks</div>     <div class="word">Is</div>     <div class="word">Amazing...</div> </div>

CSS Code: We have styled the body element for demo purposes you will have to style it according to your needs.

The container is the parent element so we will position the child items relative to it and not the whole body.
Filter contrast is necessary to spread the blur effect like an ellipse shape with some striations within to make it appealing.
You can have your own font family which you like, we have opted for monospace here.
Word div are child elements and we add the main hero, and the animation to it keeping the margin auto so that it doesn't shy away in the corner.
Adding the translation everything is stacked upon each other. Delaying the animation of each element so that things go according to plan.
Keyframes times the blur and opacity effect in the transition animation.

CSS

body {     background: #151515;     height: 100vh;     display: grid;     place-items: center; }  .container {     position: relative;     font-family: monospace;     color: rgb(255, 255, 255);     font-size: 4em;     filter: contrast(15); }  .word {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     animation: switch 8s infinite ease-in-out;     min-width: 100%;     margin: auto; }  .word:nth-child(1) {     animation-delay: -7s; }  .word:nth-child(2) {     animation-delay: -6s; }  .word:nth-child(3) {     animation-delay: -5s; }  @keyframes switch {      0%,     5%,     100% {         filter: blur(0px);         opacity: 1;     }      50%,     80% {         filter: blur(180px);         opacity: 0;     } }

Complete Code Combined: Here we combine all the code and you can copy this to try it yourself don't forget to add your own art to it.

HTML

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta name="viewport"            content="width=device-width,initial-scale=1.0" />     <title>Text switching animation using CSS</title>      <style>         body {             background: #151515;             height: 100vh;             display: grid;             place-items: center;         }          .container {             position: relative;             font-family: monospace;             color: rgb(255, 255, 255);             font-size: 4em;             filter: contrast(15);         }          .word {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             animation: switch 8s infinite ease-in-out;             min-width: 100%;             margin: auto;         }          .word:nth-child(1) {             animation-delay: -7s;         }          .word:nth-child(2) {             animation-delay: -6s;         }          .word:nth-child(3) {             animation-delay: -5s;         }          @keyframes switch {              0%,             5%,             100% {                 filter: blur(0px);                 opacity: 1;             }              50%,             80% {                 filter: blur(180px);                 opacity: 0;             }         }     </style> </head>  <body>     <div class="container">         <div class="word">GeeksForGeeks</div>         <div class="word">Is</div>         <div class="word">Amazing...</div>     </div> </body> </html>

Output: So here it is our amazing text-switching animation, hope you will make it better by adding your creativity to it. Happy Styling!

Fading Text Animation Effect Using CSS3

satyamm09

Improve

Article Tags :

Text switching animation using CSS

Similar Reads