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!
Top comments (28)
Love it! I used the feedback from the comments and tweaked it a bit:
ch
as unit::after
pseudo to insert a vertical bar character with blink animationauto
, but you can usemax-width: 0
and then animate to a fixed number of characters:max-width: 25ch
!Awesome, thanks for sharing. 😀
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!
💗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; __
Or, you could use the
ch
-unit explained by Lea Verou:lea.verou.me/2012/02/simpler-css-t...
Great, thank you.
Awesome effect! Thank you for sharing.
This is really cool, thanks for sharing!
Thanks!
Nice!
Thank you!
I have been looking at typewriting effect without using Javascript. Finally I understood it. Your post is awesome!!
Awesome trick, I love it ❤
Thank you😀
Great, I am going to change my animation to this css code right now.