This content originally appeared on DEV Community and was authored by Temani Afif
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 ?
This content originally appeared on DEV Community and was authored by Temani Afif
Temani Afif | Sciencx (2021-09-05T15:31:31+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.