Experimenting a Bit More With steps() - Typing Animation
So here is another experiment with the steps() timing function. This is a Pure CSS3 typing animation by Lea Verou that also inspired the previous item.
The font is monospace so that every character has the same width. The number of characters have been hardcoded in the steps() function in CSS. The first approach requires an extra element (span in this case) and a background for it. You can avoid the extra element by using a pseudo-element like ::after but still that will require a background-color and support for animations on pseudo elements is still not good. FF 11 supports it while no other browser seems to do so (not even Chrome 18).
To overcome the solid background and extra element limitations, you can follow the second approach where you need to set a fixed width to the <h1> in the keyframes as well as to the CSS declarations for itself. You will also need white-space: nowrap; to prevent the text from breaking into multiple lines due to less width. Well, I didn't want to hardcode the width in px/em in the CSS so i wrapped the <h1> inside a <div> and floated the div. This allowed me to simply use 100% width in the CSS for the heading, but you can choose your own path between the two.
If you are still having problems understanding the workings, then check out this simple fiddle by Lea that just animates the cursor.