Transitions, Transformations, and Animations
Historically, whenever elements needed to be moved or animated on screen, it was essential to call upon JavaScript. Nowadays, CSS can handle the majority of motion requirements using CSS transitions and CSS 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 100px 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. ...