After seeing a tweet from Prantham on Twitter (make sure to give him a follow: https://twitter.com/Prathkum) I wanted to make my own typewriter effect using only CSS!

My goal with this was to make it as customizable as possible, so if you changed the text you could update it as quickly as possible using custom properties.

🔗 Links
✅ The code from this video: https://codepen.io/kevinpowell/pen/ExWZzmm

⌚ Timestamps

• 00:00 - Introduction
• 01:41 - Use a monospace font
• 02:19 - Setting the stage with pseudo-elements
• 03:55 - Animation to reveal the text
• 05:45 - Improving the animation with steps()
• 07:16 - Using max-content for the width
• 09:18 - Making the text look like it’s being revealed
• 09:46 - Adding the caret
• 11:48 - The blinking animation
• 14:48 - Making it easier to customize
• 16:01 - Animating the other text

#css