Text Typing Animation Effect Using HTML & CSS

monalishamondol

Monalisha Mondol

Posted on March 22, 2021

Text Typing Animation Effect Using HTML & CSS

Sometimes you would like to have a nice and cool text animation like a typewriter text animation which makes it looks like a hacker type of thing. You can include this type of animation in your portfolio to show off or even on your business landing page. It just makes it looks elegant.
Adding a little animation to a website can make it eye-popping. There are various ways you can create animations, one of which is adding a typing effect to your text. Typewriter text animations are quick to implement and can do wonders for your website by making it look exceptionally impressive.

How To Make It
HTML Code:

<div id="typing">I AM A <span>WEB DESIGNER</span></div>
<div id="crow">|</div>
Enter fullscreen mode Exit fullscreen mode

CSS Code:

body{background:black;
margin-top:200px;
margin-left:50px;}
#typing {

            width: 0ch;
            color: white;
            float: left;
            font-family: sans-serif;
            font-weight:bold;
            font-size: 60px;
            overflow: hidden;
            white-space: nowrap;
            animation: typing 5s steps(22) 1s infinite alternate;
        }
        #typing span{
        color:red;}

        #crow {
            float: left;

      color: white;
            font-family: consolas;
            font-weight:bold;
            font-size: 60px;
            animation: crow 0.5s linear 0s infinite;
        }
        @keyframes typing {
            from {
                width: 0ch;
            }
            to {
                width: 25ch;
            }
        }
        @keyframes crow {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
Enter fullscreen mode Exit fullscreen mode

Download Source Code: Click Here{Google Drive}

Watch Video Tutorial: Click Here{YouTube}

💖 💪 🙅 🚩
monalishamondol
Monalisha Mondol

Posted on March 22, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related