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;
Level up every day