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

3. Animating Elements with Transitions

CSS transitions allow you to smoothly animate changes to animatable property values. You define which property’s value changes should be animated and how long an animation should take, and the browser transitions between the two values. This chapter outlines how you can combine transforms with transitions in order to animate changes made to animatable properties. It also reviews the other CSS properties that can be animated with the use of transitions. In this chapter, you’ll enhance the bicycle example from Chapter 2, “Building a Foundation with Transforms,” causing the bike to move across the screen and spin its wheels in response to user actions.

Introduction to Transitions

All the transforms you applied ...