Text Typing Animation using only HTML & CSS

Hey friends, today in this blog you’ll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation. You may have seen this type of text typing animation on many portfolio sites or other sites. Generally, this animation is created using JavaScript or jQuery library, and the famous jQuery library for text animation is typed.js but now I’ll tell you how you can create this text typing animation using only HTML & CSS.

In this text animation, there are two types of texts that mean one is a static text which has no animation, and the second one has animation and it changes dynamically. I have added four different texts to this animation and it’s shown one by one with a typing animation which looks pretty cool and interesting.

image

HTML CODE

<!DOCTYPE html>
<!-- Created By SpicyCoder | www.spicycoder.tech -->
<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 Typing Animation | SpicyCoder</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="static-txt">I'm a</div>
        <ul class="dynamic-txts">
            <li><span>Designer</span></li>
            <li><span>Developer</span></li>
            <li><span>Freelancer</span></li>
        </ul>
    </div>
</body>
</html>

CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
            *{
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family: 'Poppins', sans-serif;
            }
            body{
              display: flex;
              align-items: center;
              justify-content: center;
              min-height: 100vh;
              background: #232323;
            }
            .wrapper{
              display: flex;
            }
            .wrapper .static-txt{
              color: #fff;
              font-size: 60px;
              font-weight: 400;
            }
            .wrapper .dynamic-txts{
              margin-left: 15px;
              height: 90px;
              line-height: 90px;
              overflow: hidden;
            }
            .dynamic-txts li{
              list-style: none;
              color: #FC6D6D;
              font-size: 60px;
              font-weight: 500;
              position: relative;
              top: 0;
              animation: slide 12s steps(4) infinite;
            }
            @keyframes slide {
              100%{
                top: -360px;
              }
            }
            .dynamic-txts li span{
              position: relative;
              margin: 5px 0;
              line-height: 90px;
            }
            .dynamic-txts li span::after{
              content: "";
              position: absolute;
              left: 0;
              height: 100%;
              width: 100%;
              background: #343F4F;
              border-left: 2px solid #FC6D6D;
              animation: typing 3s steps(10) infinite;
            }
            @keyframes typing {
              40%, 60%{
                left: calc(100% + 30px);
              }
              100%{
                left: 0;
              }
            }
Related Posts
3D Social Media Buttons using only HTML & CSS
  July 03, 2021     SpicyCoder
Social Media Buttons with Tooltip on Hover using only HTML & CSS
  July 02, 2021     SpicyCoder
Neumorphism Analog Clock using HTML CSS & JavaScript
  July 10, 2021     SpicyCoder