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.
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 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.
Now you have plenty of CSS-only typewriter effects. Enjoy 👍