In this post, I will enhance The Multi-line Typewriter to create a more fancy variation of the "writer effect" using only CSS.
PS: click the "rerun" button at the bottom right of each embedded Pen to run the animation again.
The Filling
Let's update the color of an existing text letter by letter.
The Sliding
A sliding cursor to reveal the text, why not!
The One Shot
A letter-by-letter animation you said? Nah! let's show everything at once!
The Random
Not that random but it looks like
The Fragmentation
A last one from the future where I will consider the Fragmentation effect I built with the CSS Paint API
Only Chrome and Edge support this for now. It should work with a multi-line text but Chrome is a bit buggy with mask when it comes to multi-line.
Get back to this in 2 years to have full support everywhere with 0 bugs.
That's it!
Now you have plenty of CSS-only typewriter effects. Enjoy 👍
Top comments (13)
@alvaromontoro You cannot survive this 5x combo!
Ok, now this is not even a typewriter effect.
^ this right here.
@afif all these effects are cool and impressive... but technically they are not a typewriter or close to it. So, I call this entry invalid, null, and void. 😂
So, I call this entry invalid, null, and void. --> pff, a looser thought! All these are the Upgrade of the classic typewriter. They are from another dimension, another world!
A world in which they respect HTML and CSS?
A world where HTML & CSS is a must. Everything is built with HTML & CSS there (buildings, cars, roads, mountain, etc). What we have here is only 5% of the CSS they have there.
That world is definitely not real and invented 😂.... Which makes this entry even less valid 🤣😂
shame on you .. You lost confidence in the power of CSS!
I have blind faith in CSS. I know it's the best programming language for what I do.
Y'all produce these so quickly, lol 😆
Marvelous
Nice work!
@inhuofficial