Pure CSS Typing Animation

With the use of keyframe animations, and a couple of (forgivable) magic numbers, we can create a pure CSS typing animation!

We use two keyframe animations - one for the cursor, one for the "typing" reveal of the letters.

A major advantage of this technique is the text being "typed" is always accessible via assistive tech as well as for things like SEO crawlers because we are using overflow: hidden. So it is only visually hidden temporarily while the full word is available in the DOM at all times.

You can borrow this animation, but it will require a bit of finessing by updating the following if you change the word and/or typeface:

// "Type" width 
// - controls how much the word container expands when each letter is "typed"
// - will need adjusted depending on word and typeface
$chWidth: .49em;
// Word length
$chCount: 9;
// Typing animation length
$typeDuration: 180ms * $chCount; 

Comments

[Ajeeb.K.P]

Hi, this is really cool. Thanks for sharing the trick.

By the way, Is it liberally licensed. Or free to use for ?

[Stephanie Eckles]

Feel free to use!