Hello readers, Today in this blog you’ll learn How to create Dynamic text animation using CSS & Html use to improve your website.


To create this program (Dynamic text animation using CSS). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.       

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

  <!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">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <div class="effect">

            <div class="text1">CSS</div>
            <div class="text2">Slide text </div>
            <div class="text3">Effect</div>

        </div>


    </body>
</html>

 

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with a .css extension.


  
  

body {
    height: 100vh;
    align-items: center;
    display: flex;
    background: #0373fc;
  }
  
  .effect {
    position: flex;
    flex-direction: column;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  .text1, .text2, .text3 {
    position: relative;
    font-family: tahoma;
    font-size: 50px;
    opacity:0;
    color: #fff;
  }
  
  .text1 {
    top:40px;
    font-weight: bold;
    animation: text3 ease .4s forwards;
  }
  
  .text2 {
    top:-40px;
    left:5px;
    animation: text2 ease .4s forwards .6s;
  }
  
  .text3 {
    top:40px;
    left:10px;
    animation: text3 ease .5s forwards 1.2s;
  }
  
  
  @keyframes text3 {
    0% {transform: translateY(0);}
    100% {transform: translateY(-40px);opacity:1;}
  }
  
  @keyframes text2 {
    0% {transform: translateY(0);}
    100% {transform: translateY(40px);opacity:1;}
  }


Enjoy coding! Watch also the video tutorial:



Hey, here’s something that might interest you:

Create an Animated Navbar Menu using JavaScript, HTML & CSS
Create a snow globe with HTML and CSS