CSS Typing Effect

Featured on Hashnode

Did you know that you can create a typing effect with zero JavaScript?

This is specifically useful when you can't use JavaScript. Like here, on Hashnode. Enjoy!

This is a typing demo.

Are you here just for the code? No problem!

Let's keep in touch:
Website: markodenic.com
Twitter: @denicmarko
Github: github.com/MarkoDenic
Codepen: codepen.io/denic

Marko Denic's photo

This can be useful for all Hashnode blogs.

/CC: Francesco Ciulla, Miguel Brito, Skay, Edidiong Asikpo, Chris Bongers, Victoria Lo, Stas Klymenko

Miguel Brito's photo

Wow, this is awesome. Modern can't stop surprising me.

Edidiong Asikpo's photo

Very interesting tip Marko Denic. Thanks for sharing.

Maria Kristina Salada's photo

thanks a lot 💕

Space Aardvark's photo

Do you know if this is "safe" for use on phones like translation and opacity are? Or is this one of the slower animations?

Marko Denic's photo

Hey Space Aardvark, this animation is quite simple and you can use it on all devices.

Siddharth Golchha's photo

This is pretty neat. Great job!

Q: How can we generalize it for text of any random length? It looks really original as

steps(22)

is the same as the length of the text here.

Marko Denic's photo

Hey Siddharth Golchha! Thank you!

You're right, the number of steps is the number of characters. It's not possible to make this dynamic.