How to Create Text Animation Effect With CSS & HTML

This text animation effect is very easy to complete and it's very useful because you can add many words when you want to define a service or a product. It's like a slider but the best part is that you don't have to add CSS library to slow down your website, with just some lines of CSS and Html you can create this nice animation. To see the animation scroll down to the bottom of the article and watch the video.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Animation Effect </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="wrapper">
        <ul>
            <li>
                <a href="#">E</a>
                <div class="down"></div>
            </li>

            <li>
                <a href="#">A</a>
                <div class="down"></div>
            </li>

            <li>
                <a href="#">S</a>
                <div class="down"></div>
            </li>

            <li>
                <a href="#">Y</a>
                <div class="down"></div>
            </li>
        </ul>
    </div>

</body>
</html>

CSS

Now, we have to add few lines of CSS in order to animate the above structure. Basically we will give the structrure a fixed height and overflow hidden. So all words will be hidden, then just move the inner content up and down to create this text animation effect. CSS:

body{
   background-color: #0d89e5;
   font-family: sans-serif;
}

.wrapper{
   text-align: center;
}

.wrapper li{
   margin-top:20%;
   display: inline-block;
   position: relative;
   margin-right: 15px;
   margin-left: 15px;

}

.wrapper a{
   color: white;
   text-decoration: none;
   line-height: 70px;
   width: 70px;
   width: 70px;
   display: block;
   background-color: #333;
   border-radius: 50%;
   font-weight: bold;
   font-size: 18px;
}

.wrapper a:hover{
   background-color: red;
   animation: rotation 0.7s;
   color: black;
}

.wrapper li:hover .down{
   z-index: -99;
   width: 70px;
   background-color: red;
   color: black;
   position: absolute;
   border-radius: 50px 50px 50px 50px;
   top: 0;
   animation: animate 0.5s forwards;
}

@keyframes animate{
   0%{
       height: 0;
   }
   100%{
       height: 150px;
   }
}

@keyframes rotation{
   0%{
       transform: rotate(0deg);
   }
   100%{
       transform: rotate(390deg);
   }
}