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!
Tech Lead/Team Lead. Senior WebDev. Intermediate Grade on Computer Systems- High Grade on Web Application Development- MBA (+Marketing+HHRR). Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
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.
💗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; __
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. 😀
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!
Or, you could use the
ch-unit explained by Lea Verou:lea.verou.me/2012/02/simpler-css-t...
Great, thank you.
💗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; __
This is really cool, thanks for sharing!
Thanks!
Nice!
Thank you!
So cool! And so simple! Thank you for sharing!!
Thanks 😃
I had been looking for such an effect for weeks. Thanks a lot mate👏
Thank you!
Great, I am going to change my animation to this css code right now.
Awesome effect! Thank you for sharing.
Very cool! Definitely bookmarking this one, thanks for sharing!
Thanks!
I have been looking at typewriting effect without using Javascript. Finally I understood it. Your post is awesome!!
Simple and cool. Thanks for sharing buddy.
Awesome trick, I love it ❤
Thank you😀
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