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

18 Aug, 2021
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>
Output:
Note: For other texts of different lengths the width and the font size of both the text should be changed accordingly.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?