Text Typing Animation Effect Using HTML & CSS

#html #css #webdev #javascript

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