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 ...

Get Responsive Web Design with HTML5 and CSS3 - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.