CSS: The Definitive Guide, 5th Edition

Chapter 18. Transitions

CSS transitions allow us to animate CSS properties from an original value to a new value over time. These changes transition an element from one state to another, in response to a change. This usually involves a user interaction but can also be due to a scripted change of class, ID, or other state.

Normally, when a CSS property value changes—when a style change event occurs—the change is instantaneous. The new property value replaces the old property in the milliseconds it takes to repaint the page (or to reflow and repaint, when necessary). Most value changes seem instantaneous, taking fewer than 16 milliseconds to render. Even if the changes take longer than that (like when a large image is replaced with one that isn’t pre-fetched—which isn’t a transition, just poor performance), it is still a single step from one value to the next. For example, when changing a background color on mouse hover, the background immediately changes from one color to the other, with no gradual transition.

CSS Transitions

CSS transitions provide a way to control how a property changes from one value to the next over a period of time. Thus, we can make the property values change gradually, creating (hopefully) pleasant and unobtrusive effects. For example:

button {color: magenta;
    transition: color 200ms ease-in 50ms;
}
button:hover {color: rebeccapurple;
    transition: color 200ms ease-out 50ms;
}

In this example, instead of instantaneously changing a button’s color value on hover, ...