Customizable Typewriter Animation With CSS

Customizable Typewriter Animation With CSS

Kevin Powell via YouTube Direct link

- Introduction

1 of 11

1 of 11

- Introduction

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Customizable Typewriter Animation With CSS

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - Use a monospace font
  3. 3 - Setting the stage with pseudo-elements
  4. 4 - Animation to reveal the text
  5. 5 - Improving the animation with steps
  6. 6 - Using max-content for the width
  7. 7 - Making the text look like it's being revealed
  8. 8 - Adding the caret
  9. 9 - The blinking animation
  10. 10 - Making it easier to customize
  11. 11 - Animating the other text

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.