Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

8. Using Transitions and Transforms to Animate Text

In this chapter you will combine keyframes, transitions, transforms, and a bit of jQuery to create a text-driven animation. You will use CSS3 to do some basic styling on elements to make them look like part of a typewriter, and then you’ll animate the text and the typewriter’s roller to give life to a much-loved quote by Virginia Woolf.

Introduction to the Typewriter Example

In this example, you will take a quote by Virginia Woolf, from her famous essay “A Room of One’s Own” (the full text of which can be found at http://ebooks.adelaide.edu.au/w/woolf/virginia/w91r/), and give life to it by animating the words as if they were being typed out on a typewriter. You’ll also leverage some CSS3 styles ...