Text Typing Animation Effect using HTML/CSS [No JavaScript]

In this video, I'll show you how to add text typing animation effect in your webpage using HTML & CSS (Keyframes + Animation).

[ploratran]

2 years later and your tutorial is life-saving. Thank you!

[shouryae]

Spectacular. 4 years later and still works :))

[ethananthony]

3 or 4 years later but still an effective & easy way, Thanks Bhai. :-)

[mathsallbysrinivas]

Super bro.after 3 years I am watching this.

[johndoe-rvto]

love it. one can add a second animation with infinite repeats that turns the border off and on to give it a terminal like appearence. I can think of so many creative ways to put your animation to use. Thank's mate!

[opyjoe]

Finally found a tutorial that explained it step by step

[alsconweb]

Perfect solution with "border-right". Really brilliant )

[deepakmadnani]

thank you sir apne bohot achha animation dalla hai wobhi without javascript.Yeh bohot easy tutorial hai thank you-Devesh Madnani

[deepakmadnani]

English translation
Dear sir,
Thank you for such an amazing tutorial it was very easy and also without javascript so that is a big deal.A big thank you-Devesh Madnani

[jitenderverma]

The right border idea makes me crazy 😁
What an idea sirji...

[ayubomaraden]

<h1>Text Typing Animation.</h1>


h1 {
animation : type 3s steps(22);
overflow : hidden;
white-space : nowrap;
font-family : consolas;
border-right : 4px solid black;
width : 22ch;

}



i lost it there oof :(

[oliverschofield]

Thanks for the great video! I was wondering if it's easy to add keyframes and reverse the animation? For example so that the text is typed, and then deleted (as with backspace). If you know how to do this and wouldn't mind helping, I would really appreciate

[Kohlrabito]

Wow that's amazing! I wanted this so badly on my pages but websites would make it really complex when it's just this... thank you!

[anandkishorprasad]

The complete code:

CSS
h1{
animation: type 3s steps(13);
overflow: hidden;
white-space: nowrap;
font-family: consolas;
border-right: 4px solid black;
width: 15ch;
}
@keyframes type{
0% {
width: 0ch;
}
100% {
width: 13ch;
}
}

HTML
<h1>I AM THE BEST.</h1>

[rubayethassan]

I have question that how to center this text on the screen. I added "text-align:center;" but it starts at the very left of the screen and then after completing the animation it comes to the center. But how to start the animation from the center and complete at the center?

[T-gm]

I'm still a newbie but I think I can do this. Thanks for the video!

[affiliatenetwork]

Great tutorial mate, however how do you do the line break with this? If let's say I have a long title & I want to break it into two rows. The <br> tag is confusing the animation.

[drezz]

how do I make the line disappear when the animation is done? (also thanks for the great tutorial!)