loading...
Cover image for Typing effect without Javascript

Typing effect without Javascript

stokry profile image Stokry ・1 min read

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!

Discussion

pic
Editor guide
Collapse
ekeijl profile image
Edwin

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 Author

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 Author

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

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 Author

Great, thank you.

Collapse
loouislow profile image
Collapse
stokry profile image
Stokry Author

Thank you!

Collapse
arturo2r profile image
ArturoDRR

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

Collapse
faisalali19 profile image
Faisal Ali Sayyed

Simple and cool. Thanks for sharing buddy.

Collapse
yesabhishek profile image
Abhishek Choudhury

I had been looking for such an effect for weeks. Thanks a lot mate👏

Collapse
stokry profile image
Stokry Author

Thank you!

Collapse
alexlsalt profile image
Alex Morton

So cool! And so simple! Thank you for sharing!!

Collapse
stokry profile image
Stokry Author

Thanks 😃

Collapse
anfossistudio profile image
AnfossiStudio

Awesome trick, I love it ❤

Collapse
stokry profile image
Stokry Author

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
Collapse
brandondasilva profile image
Brandon Da Silva

Very cool! Definitely bookmarking this one, thanks for sharing!

Collapse
stokry profile image
Collapse
0x04 profile image
Oliver Kühn

Yeah! Well, I think there is a lot room of doing stuff with that idea: codepen.io/0x04/details/mdVKpPN

Collapse
stokry profile image
Stokry Author

Cool😀

Collapse
dallgoot profile image
dallgoot

i think you can put the "blink" animation on a ".type:after" so it follows the last character