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 ...
Get Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.