12 Creative CSS and JavaScript Text Typing Animations

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.

12 handpicked typing text animations are shown below along with their source code. A bit of knowledge of CSS and JavaScript is all you need to learn to use these animations. You can go to this post which explains step-wise creation of a typewriter effect.

To begin with, some simple typing animations created using pure CSS are shown which can give an elegant look to your text and website as a whole.

1. A Simple Typing Effect with Blinking Cursor

This is a simple yet beautiful typewriter effect created using CSS animation. It uses Source Code Pro as a font base to give it the effect of typewriter. Its code is explained in the post - Creating Typewriter Text Animation using CSS.

2. Style the Cursor

This animation uses a horizontal blinking cursor having the width of the characters of the text. Simply changing the cursor shape can give your animation a different look. You can try using other types and shapes of cursors as well.

12. Making It User Interactive

Lastly, we have this demo which allows the user to type text and erase it as if it is being typed and erased on a text editor. There are separate buttons for the two operations. This effect can be used in a lot of applications, like making the user choose from a list of questions and erasing the selected question when he submits an answer to it.

Conclusion

So, this was a list of some cool typewriter animation effects created using only CSS and JavaScript. There is a lot which can be done with typography to create impressive effects. You can come up with a new one using some permutations and combinations. Hopefully, one of these will be making your homepage look more awesome.