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 👍