Skip to main content

Command Palette

Search for a command to run...

CSS Typing Effect

Updated
1 min read
CSS Typing Effect
M
Software Engineer.

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

T

thanks a lot 💕

2
M

This can be useful for all Hashnode blogs.

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

13
M

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

1
E

Very interesting tip Marko Denic. Thanks for sharing.

1
S

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

1
M

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

3
S

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.

1
M

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.

4
C

veery nice! thumb_up

2
M

Thank you Cristian Gherghel. 🙂

2