Responsive Web Design with HTML5 and CSS - Fourth Edition

11

Transitions, Transformations, and Animations

CSS can handle the majority of motion requirements using CSS transitions and transforms, or CSS animations.

To clearly understand what transitions, transforms, and animations do, I will offer this, perhaps overly simplistic, summary:

• A CSS transition is used to define how one visual state should move (transition) to another, differing visual state.
• A CSS transform is used to take an existing element and transform it into something or someplace else without affecting any other elements on the page. For example, “make this twice as big” and “move this 100 px to the right” are plain text descriptions of tasks we can achieve with CSS transforms. However, the transform doesn’t control how the element ...