Transitions and Animations in CSS

Chapter 1. CSS Transitions and Animations

CSS transforms, CSS transitions, and CSS animations are three separate CSS specifications. While the three terms sound like they may do the same thing—make something move—CSS transitions and animations make things move over time. Transitions and animations let you define the transition between two or more states of an element.

Transforms change an element’s appearance through translation, rotation, scaling, and skewing, but do not have a time component. You can use the CSS transform property to change the location of an element’s coordinate space of the CSS visual formatting model, but you need transitions or animation to make that change occur over time. The transform property is covered in Transforms in CSS (O’Reilly).

While animation is possible with JavaScript, understanding CSS3 transitions and animations will save you a lot of time and effort if you need to animate anything on the Web. Generally, it will also save your users’ CPU and battery compared to JavaScript.

Used correctly, CSS animations and transitions can give your web applications life and depth. While this booklet focuses on how to transition and animate elements in your documents, understanding when to use animation can improve your user experience (UX) as well. By adding the dimension of time, animating can help your UX communicate on a different level.

12 Basic Principles of Animation

Well before the advent of the Web, animators at Disney came up with 12 principles ...