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.