O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required