Text Reveal Animation code css

Text Reveal Animation Using Html Css – Source Code

Text Reveal Animation Using Html Css – Source Code

In this article we create a text reveal animation using only html css. We use some span tags in html and then create animation in css. So let’s write html for text reveal animation.

Html Code

<!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 Reveal Animation </title>
        <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Lorem <span class="reveal">Ipsum dolor</h1></h1>
        <p>Mauris imperdiet, ante quis malesuada maximus, velit dolor <span class="reveal">maximus magna, eget lacinia purus neque in purus. Nunc quis vestibulum nulla,</span> in tincidunt elit.
        </p>
</body>

</html>

We use a basic html tag in this project. H1, span tags, and paragraph text for html content. You can see the output below using only html.

Html Output

Text Reveal Animation code

Now we write Css Code For Styling and give Text Reveal Effect.

Html Css Project Idea

Css Code 

.reveal {
    color:#0000;
    background:
      linear-gradient(#00DFFC 0 0),
      linear-gradient(#00DFFC 0 0);
    background-size:0 100%;
    background-position:0 0;
    -webkit-background-clip:padding-box,text;
            background-clip:padding-box,text;
    background-repeat:no-repeat;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    animation: 
     t 1.2s  .5s both,
     b 1.2s 1.3s both;
  }
  @keyframes t{
    to {background-size:150% 100%}
  }
  @keyframes b{
    to {background-position:-200% 0,0 0}
  }
  
  body {
    font-family: sans-serif;
    font-weight: 700;
    padding:20px;
    background:#005F6B;
    color:#00DFFC
  }
  p {
    font-size:25px;
  }
  h1 {
    font-size:40px;
    text-align:center;
  }
  h1,p{
    margin:10px auto;
    max-width:600px;
  }

That’s a small front-end project. We use basic css animation for this text reveal animation. Using keyframe for particular part animation.

Final Output 

Text Reveal Animation code css

You can see this video for this project output. When the page load text reveals animation start. You can modify this text animation using advanced css or you can use javascript.

Hope you like this project, we create your own and use this project in any project. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – @t_afif

written by – Codewithrandom



Tags: ,

Leave a Reply