---
title: "Discussion on \"CSS Typing Effect\" | Hashnode"
description: "Discussion on \"CSS Typing Effect\". Did you know that you can create a typing effect with zero JavaScript?\nThis is specifically useful when you can't use JavaScript. Like here, on Hashnode. Enjoy!\n\n    \n      This is a typing demo.\n    \n\n\n\nAre you here just for the code? No problem!  \n..."
url: "https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [CSS Typing Effect](https://denic.hashnode.dev/css-typing-effect?utm_source=hashnode&utm_medium=feed)

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! ...

Oct 14, 2020 · 1 min read · denic.hashnode.dev  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#web-development](https://hashnode.com/tag/web-development)

## Written by

[Marko Denic](https://hashnode.com/@denic)

@denic

  
[View profile](https://hashnode.com/@denic)

Software Engineer.

Software Engineer.

## Responses 5

Markdown supported · ⌘↵ to post

[Tina Salada](https://hashnode.com/@tinasalada)

[Oct 20, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f8f2e4303022e45ade4aef9)

thanks a lot 💕

[Marko Denic](https://hashnode.com/@denic)

[Oct 29, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f8f2e4303022e45ade4aef9#reply-5f9b2a8f63809957bd8ec2e4)

Thanks [Maria Kristina Salada](https://hashnode.com/@salada). :)

[Marko Denic](https://hashnode.com/@denic)

[Oct 15, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f888e63d7dc0b17a97a152e)

This can be useful for all Hashnode blogs.

/CC: [Francesco Ciulla](https://hashnode.com/@FrancescoCiulla), [Miguel Brito](https://hashnode.com/@miguendes), [Skay](https://hashnode.com/@skay), [Edidiong Asikpo](https://hashnode.com/@didicodes), [Chris Bongers](https://hashnode.com/@dailydevtips), [Victoria Lo](https://hashnode.com/@victoria), [Stas Klymenko](https://hashnode.com/@StasKlymenko)

[Miguel Brito](https://hashnode.com/@miguendes)

[Oct 15, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f888e63d7dc0b17a97a152e#reply-5f88d2e4d7dc0b17a97a17bb)

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

[Edidiong Asikpo (Didi)](https://hashnode.com/@didicodes)

[Oct 17, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f888e63d7dc0b17a97a152e#reply-5f8afdecd7dc0b17a97a2e5d)

Very interesting tip [Marko Denic](https://hashnode.com/@denic). Thanks for sharing.

[Space Aardvark](https://hashnode.com/@spaceaaradvark)

[Oct 14, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f8761e9c5c9ff500d6cb8cc)

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](https://hashnode.com/@denic)

[Oct 15, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f8761e9c5c9ff500d6cb8cc#reply-5f87ee5b4aeeb354354ed108)

Hey [Space Aardvark](https://hashnode.com/@spaceaaradvark), this animation is quite simple and you can use it on all devices.

[Siddharth Golchha](https://hashnode.com/@sidrocks)

[Oct 14, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f87450f42164e4fe94fed95)

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](https://hashnode.com/@denic)

[Oct 15, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f87450f42164e4fe94fed95#reply-5f87eed732eeca54569a3610)

Hey [Siddharth Golchha](https://hashnode.com/@sidrocks)! Thank you!

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

[Cristian Gherghel](https://hashnode.com/@electron)

[Oct 14, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f86a8584f98e643894363d1)

veery nice! **thumb\_up**

[Marko Denic](https://hashnode.com/@denic)

[Oct 14, 2020](https://hashnode.com/posts/css-typing-effect/5f86905a76870f43aa09d2d4/comment/5f86a8584f98e643894363d1#reply-5f86db2676870f43aa09d7b4)

Thank you [Cristian Gherghel](https://hashnode.com/@electron). 🙂