DEV Community

Cover image for Typing effect without Javascript
Stokry
Stokry

Posted on

Typing effect without Javascript

CSS is powerful, you can do a lot of things without JS, also it's important because it controls all design-related aspects of your website. Typography, colors, page layouts, and any other visual aspects of your website are all controlled by mighty CSS.

I rely on CSS, which means I use Javascript as little as possible. Today I will show you the typing effect without any JavaScript!

Let's jump to the code!



<div class="container">
    <div class="type">
      This is one cool effect
    </div>
</div>


Enter fullscreen mode Exit fullscreen mode

And a little bit of CSS



.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type {
  width: 35%;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}
@keyframes typing {
  from {
    width: 0
  }
}    
@keyframes blink {
  50% {
    border-color: transparent
  }
}


Enter fullscreen mode Exit fullscreen mode

This is our result:

enter image description here

Thank you all!

Top comments (28)

Collapse
 
ekeijl profile image
Edwin β€’ β€’ Edited

Love it! I used the feedback from the comments and tweaked it a bit:

  • Use ch as unit
  • Use the ::after pseudo to insert a vertical bar character with blink animation
  • Number of characters is configurable as CSS variable
  • I animate the width of the typed text using this trick. You can't animate from 0 to auto, but you can use max-width: 0 and then animate to a fixed number of characters: max-width: 25ch!

Collapse
 
stokry profile image
Stokry β€’

Awesome, thanks for sharing. πŸ˜€

Collapse
 
victoroliveirab profile image
victoroliveirab β€’

I love the CSS-only philosophy, and this code adds one more to the list! Thanks for sharing

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡ β€’

Same here, I wrote some posts about that too:

dev.to/joelbonetr/build-your-own-c...

There are some concerns about CSS Only that can easily handled with few JS such making css only modals to not count as window.history registry for example, but I try to handle with CSS as much as I can, specially when going for performance and pagespeed.

Collapse
 
victoroliveirab profile image
victoroliveirab β€’

Very nice article, Joel! I'll try it myself sometime!

Collapse
 
stokry profile image
Stokry β€’

Me too, I try to write as little Javascript as possible!

Collapse
 
veerasrivastava profile image
Veera Srivastava β€’

πŸ’—it!
P.S.: one thing that no one has mentioned in the comments yet is that in the css of . container, rather that centering it by using that flexbox bad-boy, simply say:: __display: grid; place-items: center; __

Collapse
 
thomasverleye profile image
Thomas Verleye β€’

Or, you could use the ch-unit explained by Lea Verou:

lea.verou.me/2012/02/simpler-css-t...

Collapse
 
stokry profile image
Stokry β€’

Great, thank you.

Collapse
 
cboles profile image
Chris Boles β€’

Awesome effect! Thank you for sharing.

Collapse
 
hb profile image
Henry Boisdequin β€’

This is really cool, thanks for sharing!

Collapse
 
stokry profile image
Stokry β€’

Thanks!

Collapse
 
louislow profile image
Louis Low β€’

Nice!

Collapse
 
stokry profile image
Stokry β€’

Thank you!

Collapse
 
arvindsridharan profile image
arvindsridharan β€’

I have been looking at typewriting effect without using Javascript. Finally I understood it. Your post is awesome!!

Collapse
 
anfossistudio profile image
AnfossiStudio β€’

Awesome trick, I love it ❀

Collapse
 
stokry profile image
Stokry β€’

Thank youπŸ˜€

Collapse
 
arturo2r profile image
ArturoDRR β€’

Great, I am going to change my animation to this css code right now.