Transitions and Animations in CSS

Chapter 2. Transitions

CSS transitions allow us to animate CSS properties from an original value to a new value over time when a property value changes.

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 (or reflow and repaint if necessary) the affected content. Most value changes seem instantaneous, taking less than 16 ms¹ to render. Even if the changes takes longer, it is a single step from one value to the next. For example, when changing a background color on hover, the background changes from one color to the next, with no gradual transition. CSS transitions enable us to smoothly animate CSS properties from an original value to a new value over time as the style recomputation proceeds:

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

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

Transitions allow the values of CSS animatable properties to change over time, providing for simple animations.² For example, instead of instantaneously changing a button’s color on hover, with CSS transitions the button can be set to gradually fade from magenta to rebeccapurple over 200 milliseconds, even adding a 50-millisecond delay before transitioning. Changing a color, no matter how long it takes, is a transition. But by adding the CSS transition property, the color change can be gradual.

You can use ...