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>
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
}
}
This is our result:
Thank you all!
Latest comments (28)
I have been looking at typewriting effect without using Javascript. Finally I understood it. Your post is awesome!!
💗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; __
Awesome trick, I love it ❤
Thank you😀
Great, I am going to change my animation to this css code right now.
Simple and cool. Thanks for sharing buddy.
Awesome effect! Thank you for sharing.
This is really cool, thanks for sharing!
Thanks!
Love it! I used the feedback from the comments and tweaked it a bit:
chas unit::afterpseudo to insert a vertical bar character with blink animationauto, but you can usemax-width: 0and then animate to a fixed number of characters:max-width: 25ch!Awesome, thanks for sharing. 😀
Yeah! Well, I think there is a lot room of doing stuff with that idea: codepen.io/0x04/details/mdVKpPN
Cool😀
i think you can put the "blink" animation on a ".type:after" so it follows the last character
I love the CSS-only philosophy, and this code adds one more to the list! Thanks for sharing
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.
Very nice article, Joel! I'll try it myself sometime!
Me too, I try to write as little Javascript as possible!
Very cool! Definitely bookmarking this one, thanks for sharing!
Thanks!
Or, you could use the
ch-unit explained by Lea Verou:lea.verou.me/2012/02/simpler-css-t...
Great, thank you.
I had been looking for such an effect for weeks. Thanks a lot mate👏
Thank you!
So cool! And so simple! Thank you for sharing!!
Thanks 😃