9. Building Flash-Style Animations with Keyframe Animations

This chapter presents a cartoon-style animation of a cat that combines the approaches discussed in previous chapters. You will learn how to build a character piece by piece, ensure that its movements across the screen are smooth by aligning the “joints” via transform-origin, and trigger a series of animations by using JavaScript timers.

Introduction to the Meow Street Fat Cat Animation

The star of the brief animation you will create in this chapter is a feline named Morgan Diamond. He is a resident of Meow Street, the financial center of downtown Catsville. He’s a fat cat with a bit of a reputation for being ruthless, even criminal. Today, while doing his typical speedy reading of the ...

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 live online training, plus books, videos, and digital content from nearly 200 publishers.