DEV Community

loading...
Cover image for Text Typing Animation Effect Using HTML & CSS

Text Typing Animation Effect Using HTML & CSS

Monalisha Mondol
Hello Developer, I am Monalisha Mandal a web developer. With the help of the dev community, I share knowledge about web design.
・1 min read

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}

Discussion (3)

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

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

Collapse
hasnaindev profile image
Muhammad Hasnain

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

Collapse
ritiknandanwar profile image
Ritik Nandanwar

Try providing source code on github.

Forem Open with the Forem app