In this post, I will enhance The Multi-line Typewriter to create more fancy variation of "writer effect" using only CSS.
PS: click the "rerun" button at the bottom right of each embedded Pen to run the animation again.
Let's update the color of an existing text letter by letter.
A sliding cursor to reveal the text, why not!
A letter by letter animation you said? nah! let's show everything at once!
Not that random but it looks like
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 its a bit buggy with mask when it comes to multi-line.
Get back to this in 2 years to have a full support everywhere with 0 bugs.
Now you have a plenty of CSS-only typewriter effect. Enjoy 👍