Damping

Stiffness decides how hard a spring pulls. Damping decides how much of that energy is thrown away as it goes, and so how the move ends. The number that actually predicts the behaviour is not the damping value on its own but the damping ratio, damping divided by twice the square root of stiffness times mass, which is why the same damping value produces a wobble on one spring and a crawl on another. Spring animation is where the mechanism lives; this is the one parameter of it worth arguing about.

There are three regimes and only three. Below a ratio of one the spring is underdamped: it reaches the target with energy left over, carries past, and comes back, each pass smaller than the last. That surplus is overshoot, and underdamping is the reason a spring has one at all. At exactly one it is critically damped, which is the fastest possible arrival that never crosses the target, and it is the setting to reach for whenever crossing would be a lie: anything that changes layout, anything carrying text, any value a reader is trying to read. Above one it is overdamped, and the extra friction buys nothing: the move simply takes longer to finish, which reads as tired rather than as calm.

For interface work the useful range is narrow. Ratios around 0.7 to 0.8 give a single small overshoot and a clean settle, which is what most people mean by springy; below about 0.5 the wobble becomes the message and the element looks like it is made of rubber. The names differ by library, which is where most of the confusion comes from: damping is called friction in some APIs, and the perceptual wrappers invert it, so a bounce of zero is critically damped and a higher bounce is a lower ratio. Read the documentation before porting numbers, and compare the results by eye rather than by parameter.

CSS has no springs, so a damping value cannot be written in a stylesheet directly. What ships instead is the finished curve, sampled into a linear() easing with enough stops to carry the wobble, which means the ratio is decided at authoring time by a generator rather than tuned live in the browser. Whatever the spelling, a reader who has asked for reduced motion gets the settled position rather than a smaller bounce, and any wobble that would move neighbouring content stays out of the layout entirely.