How to create an animated typing effect

When used well, CSS animation can add interest and personality to your site. In this article, we'll walk through how to create an animated effect that will make your typography appear gradually, as if it were being typed on a typewriter. You can see an example of the animation in action on the site for Crypton, a cryptocurrency trading bot. The effect is impressive and it's easy to implement, too. 

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Leon Brown

Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners. 

Latest in Web Design
A screenshot of the new YouTube UI
Yes, YouTube has a new UI. Yes, it's terrible
Adobe XD logo
It seems Adobe's given up on UI design (for now)
Adobe Muse
Why Adobe is frustrating web designers
Dropbox Relay interface with photo of man running
How Dropbox Replay is helping designers future-proof their practice
UX revolution
From 2D to 3D: How brands can harness the latest UX/UI revolution
Personal portfolio of Julie Bonnemoy with a retro vibe
From AI to no-code: The top web design trends for 2024 according to Designmodo
Latest in How to
Gesture drawing: all you need to know plus ways to practise in 2 and 5 minutes
How to draw a male figure
drawing of a naked woman with someone drawing it
How to draw a female figure
GIMP in pro work
Making GIMP 3.0 work for pro results: is it possible?
Pejman Rajabi 3D tutorial of Super Mario fan art
“One of the best creative experiences of my life, working with such an amazing artistic crew” – how VFX artist Pejman Rajabi and friends created a heartfelt tribute to Super Mario
Marco Teixeira 3D tutorial
“The challenge was to create a cool character design”: concept artist Marco Teixeira reveals the techniques and inspiration behind his superb 3D character render