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

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 ...