How to Create Sliding Text Reveal Animation using HTML & CSS ?

Last Updated : 26 Jul, 2024

In this article, we will implement sliding text reveal animation which can be used in personal portfolios, websites, and even in YouTube introduction videos to add an extra edge to our videos so that it looks more interesting and eye-catchy at first instance and the best part is that we will do that using just HTML and CSS.

Approach: The animation will begin with the appearance of the first text, for example, we are taking the word as “GEEKSFORGEEKS”, and then it will slide towards the left, and our second text that is: “A Computer Science Portal For Geeks” will reveal towards the right (If you’re still confused, what the animation is all about, you can quickly scroll to the end of the page and see the output, for better understanding).

We will be using different keyframes to divide our animation into different stages so that it works smoothly.
Keyframes hold what styles the element will have at certain times. The following keyframes are used:

@keyframes appear: In this keyframe, we will deal with the way the first text appears.
@keyframes slide: In this keyframe, we will try to move the text in a sliding manner.
@keyframes reveal: In this keyframe, we will reveal our second text.

Below is the implementation of the above approach.

Example: In this example, we will be going to use the above-defined properties to create the animation.

index.html

<!DOCTYPE html> <html>  <head>     <title>Text Reveal Animation</title> </head> <style>     @import url( 'https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');      body {         font-family: Montserrat;         text-align: center;         color: #006600;         font-size: 34px;         padding-top: 40vh;         overflow: hidden;     }      div {         display: inline-block;         overflow: hidden;         white-space: nowrap;     }      div:first-of-type {         animation: appear 6s infinite;     }      div:last-of-type {         animation: reveal 6s infinite;     }      div:last-of-type span {         font-size: 33px;         color: #808000;         animation: slide 6s infinite;     }      @keyframes appear {         0% {             opacity: 0;         }          20% {             opacity: 1;         }          80% {             opacity: 1;         }          100% {             opacity: 0;         }     }      @keyframes slide {         0% {             margin-left: -800px;         }          20% {             margin-left: -800px;         }          35% {             margin-left: 0px;         }          100% {             margin-left: 0px;         }     }      @keyframes reveal {         0% {             opacity: 0;             width: 0px;         }          20% {             opacity: 1;             width: 0px;         }          30% {             width: 655px;         }          80% {             opacity: 1;         }          100% {             opacity: 0;             width: 655px;         }     } </style>  <body>     <div>GEEKSFORGEEKS</div>     <div>         <span>A Computer Science Portal For Geeks</span>     </div> </body>  </html>