Chapter 8. Transitions, Transformations, and Animations

Historically, whenever elements needed to be moved or animated around the screen, it was the sole domain of JavaScript. Nowadays, CSS can handle the majority of motion jobs via three principal agents: CSS transitions, CSS transforms, and CSS animations. In fact, only transitions and animations are directly related to motion, transforms simply allow us to change elements, but as we shall see, they are often integral to successful motion effects.

To clearly understand what each of these things is responsible for, I will offer this, perhaps overly simplistic summary:

• Use a CSS transition when you already have the beginning and end state of the things you want to apply motion to, and need a simple way to 'tween' from one state to another.

• Use a CSS transform if you need to visually transform an item, without affecting the layout of the page.

• Use a CSS animation if you want to perform a series of changes to an element at various key points over...