Text Reveal Animation
Text Reveal Animation
  • Post author:
  • Post category:Uncategorized
  • Reading time:6 mins read
  • Post published:May 3, 2022
  • Post comments:0 Comments
  • Post last modified:May 3, 2022

Hy Everyone
In this tutorial, we will create a simple Text Reveal Animation using CSS. Text will be gradient, so here we will also learn how we can create a gradient text in CSS.

Text Reveal Animation

For creating our Text Reveal Animation, we will need two files called index.html and style.css. Let’s start with our index.html file.

index.html

first of all, we will link our style.css file in the index.html file, For linking create a <link> tag in <head> section.

<link rel="stylesheet" href="style.css">


Now we will create a div inside the <body> section with “container” as a class name.

<body>    
  <div class="container">

  </div>
</body>


Now write your text between <h3> and </h3> tag inside the div.

<body>    
  <div class="container">
    <h3>Insert Text Here!</h3>
  </div>
</body>


Here is our index.html file is complete. Now create a style.css file.

style.css

First of all, write the code for the .container class.

.container{
  padding-top: 200px;
  text-align: center;
}


Here we have set the text-align property to center, so it will center the text horizontally. we have given the 200px padding from the top, so it will take space from the top.

.container h3{
  font-size: 3vw;
  overflow: hidden;
  letter-spacing: 1px;
  text-align: center;
  width: 0%;
  white-space: nowrap;
  background-image: linear-gradient(155deg, #fb7419, #432BB6, #319197);
  background-clip: text;
  margin-left: auto;
  margin-right: auto;
  -webkit-background-clip: text;
  color: transparent;
  animation: typeIn 7s linear infinite;
}


the most important part of our gradient is our h3 code. First we set the font size to 3vw and the overflow property is hidden, it will hide the extra part.
Letter-spacing is 1px, it will give the space between letters.
here we have also aligned text in the center position.
the default width is set to 0%.
The white-space property is set to nowrap, which means it will not bring text down when the width is minimum. if our width is 0% and we have not set the white-space property to nowrap the text will look Like this:

Insert
Text
Here!

it will break down the text, if our code has this property it will not break the text while we minimize the width.

background-image is set with the linear gradient, it will change the background color to a gradient. After this, we will cut our text shape from this.

-webkit-background-clip is also an important property to cut the text shape from the background.

color property value is set to transparent so we can see the gradient. if we do not set it to transparent then it will show a single color ( by default it will be black).

animation property is used to create an animation.
typeIn is the name of the animation.
7s is the time duration of the animation.
Linear infinite is the loop value for animation play.

Note: Since we can’t see the bottom face of the cube, it’s optional.

@keyframes typeIn {
  0%{
    width: 0%;
  }
  50%{
    width: 50%;
  }
  100%{
    width: 0%;
  }
}


here our animation will change the width to show and hide the text. we have set the three-stage for our animation at 0% the width will be 0%, at 50% the width will be 50% because our text is short, if your text is too long then change it to 100%. and at 100% the width is 0%. It will continue in an infinite loop to show and hide the text.

Github Code Link!

If you find this post helpful then please share this with your friends.

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply