linear() easing

The name carries two meanings and they are not related. linear the keyword has always meant constant speed, the timing that makes an element look mechanical because it starts and stops at full pace. linear() the function, which shipped across the engines during 2023, means something else entirely: a list of output values sampled along the animation, joined by straight segments. Each stop says how far along the movement is at that moment, and with enough of them the straight segments trace any shape you like. The word describes the interpolation between the stops, not the feel of the result.

What this buys is everything a single cubic bezier cannot hold. A bezier has four numbers and crosses its destination at most once, so a bounce or a spring settling through several diminishing passes has no expression as one curve. A sampled list has no such ceiling: every extra wobble is a few more numbers, and the damping chosen for the spring survives the trip into CSS as the shape of the point list. The stops are almost never written by hand. A generator solves the spring, samples it, and prints the value, which is why real stylesheets carry thirty odd unexplained decimals behind one token name.

Two knobs matter in practice. Density decides smoothness, since too few stops leave visible corners on a long slow move while too many bloat the stylesheet for motion nobody can see, and somewhere around twenty is usually enough. Placement decides where that resolution goes: a stop may carry its own input percentage, as in linear(0, 0.25 20%, 1), so the busy part of the curve can be sampled closely and the calm part left alone. Beyond that it behaves like any other easing value, usable anywhere a keyword or a bezier is.

Remember what it is not. A sampled curve is a photograph of a simulation, fixed at authoring time, so it cannot answer an interruption the way a real spring does: reversing halfway through replays a shape rather than carrying velocity into a new target. If a gesture can be caught mid-flight, run the simulation in script and keep linear() for motion that simply plays, which is most of it. And the usual duty applies at the other end: a reader who has asked for reduced motion should land on the settled position rather than get a smaller bounce.