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>

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;
            }
        }

Download Source Code: Click Here{Google Drive}

Watch Video Tutorial: Click Here{YouTube}

Comments

[Chittoji Murali Sree Krishna]

Try using codepen instead of storing it in Google drive or somewhere else, you can show it as live

[Muhammad Hasnain]

Thanks for sharing this. Make sure to upload all such source-code to your Github.

[Ritik Nandanwar]

Try providing source code on github.