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 makes that change; that is the job of the transition.
- A CSS animation is typically used to make a series of changes to an element.
If those differences seem a little vague at...