DEV Community

Cover image for Typing effect without Javascript
Stokry
Stokry

Posted on

167 28 1 1

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!

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

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.

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay