Skip to content

Color changes in 100ms

Hover and focus color shifts take 100ms on a soft ease.

Motion measured on linear.app; colors from an unofficial DESIGN.md.

Sweep down the list

Move across rows, or tap Sweep. Tap a row to select.

400ms linearBad

transition: color 400ms linear

100ms soft easeGood

transition: color 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94)

.row {
  --colour-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* measured */
  transition:
    background-color 100ms var(--colour-ease),
    color 100ms var(--colour-ease);
}
@media (hover: hover) and (pointer: fine) {
  .row:hover { background: var(--hover); color: var(--ink); }
}

Why it matters

Hover is a question; a fast answer shows the row is live.
Color is cheap to repaint, so it can run faster than movement.
Slow fades trail the pointer and leave two rows lit at once.

Pros

A sweep reads as one moving highlight.
One value on every control gives a consistent feel.
Nothing moves, so reduced motion needs no change.

Cons

At 100ms the fade is close to a cut; some find it abrupt.
Ambient color like gradients suits slower fades.
Measured from the live site, not a published spec.