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
animation to make that change occur over time. The
transform property is covered in Transforms in CSS (O’Reilly).
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.
Well before the advent of the Web, animators at Disney came up with 12 principles ...