Skip to content

Presses settle in 160ms

Transform and filter run 160ms, one step slower than color.

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

Press and release quickly

Tap each button fast, then hover and release slowly.

600ms linearBad

transition: transform 600ms linear

160ms soft easeGood

transition: transform 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)

.action {
  --settle: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* measured */
  transition:
    transform 160ms var(--settle),
    filter 160ms var(--settle),
    background-color 100ms var(--settle);
}
@media (hover: hover) and (pointer: fine) {
  .action:hover { transform: translateY(-2px); filter: brightness(1.15); }
}
.action:active { transform: scale(0.97); }

Why it matters

Movement covers distance, so it needs a beat longer than color.
160ms is long enough to read as weight and short enough to stay ahead.
The same curve as color keeps hover and press one system.

Pros

Rapid taps never stack up a lagging animation.
Lift and brightness land together, so it feels physical.
One pair of values covers buttons, tiles and rows.

Cons

Very large elements need longer than 160ms.
Filters cost more to paint than color on big areas.
Measured from the live site, not a published spec.