Upgrading the CSS only Multi-line Typewriter effect

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.

The Filling

Let’s…

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.



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 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.



That’s it!

Now you have a plenty of CSS-only typewriter effect. Enjoy ?

The End


Print Share Comment Cite Upload Translate
APA
Temani Afif | Sciencx (2024-03-28T10:18:41+00:00) » Upgrading the CSS only Multi-line Typewriter effect. Retrieved from https://www.scien.cx/2021/09/05/upgrading-the-css-only-multi-line-typewriter-effect/.
MLA
" » Upgrading the CSS only Multi-line Typewriter effect." Temani Afif | Sciencx - Sunday September 5, 2021, https://www.scien.cx/2021/09/05/upgrading-the-css-only-multi-line-typewriter-effect/
HARVARD
Temani Afif | Sciencx Sunday September 5, 2021 » Upgrading the CSS only Multi-line Typewriter effect., viewed 2024-03-28T10:18:41+00:00,<https://www.scien.cx/2021/09/05/upgrading-the-css-only-multi-line-typewriter-effect/>
VANCOUVER
Temani Afif | Sciencx - » Upgrading the CSS only Multi-line Typewriter effect. [Internet]. [Accessed 2024-03-28T10:18:41+00:00]. Available from: https://www.scien.cx/2021/09/05/upgrading-the-css-only-multi-line-typewriter-effect/
CHICAGO
" » Upgrading the CSS only Multi-line Typewriter effect." Temani Afif | Sciencx - Accessed 2024-03-28T10:18:41+00:00. https://www.scien.cx/2021/09/05/upgrading-the-css-only-multi-line-typewriter-effect/
IEEE
" » Upgrading the CSS only Multi-line Typewriter effect." Temani Afif | Sciencx [Online]. Available: https://www.scien.cx/2021/09/05/upgrading-the-css-only-multi-line-typewriter-effect/. [Accessed: 2024-03-28T10:18:41+00:00]
rf:citation
» Upgrading the CSS only Multi-line Typewriter effect | Temani Afif | Sciencx | https://www.scien.cx/2021/09/05/upgrading-the-css-only-multi-line-typewriter-effect/ | 2024-03-28T10:18:41+00:00
https://github.com/addpipe/simple-recorderjs-demo