Beyond · Motion

Transitions

A transition interpolates a property when its value changes instead of letting it jump. The shorthand is property duration [timing-function] [delay], and it needs at least a property and a duration — transition: color on its own is dropped.

Five things interpolate: color, background, width, height, and all. Colours blend channel by channel in sRGB; widths and heights animate as whole cells. The timing function defaults to ease; ease-out, linear, steps(n), and cubic-bezier(…) are all available.

The item below toggles a done class when you press the button, switching its colour between grey and green. Right now the switch is instant.

Your turn

Give .item a transition so the colour eases between the two states:

.item {
    color: #cccccc;
    transition: color 400ms ease-out;
}

Press Run and click Toggle done a few times — the colour now fades over 400ms rather than snapping. Solve shows the finished version; Reset restores the start.