CSS linear() Easing for Spring Motion

CSS linear() easing can turn sampled points from a damped spring into a reusable motion curve, but it only interpolates between the stops you provide. This tutorial fits one bounded curve, measures the gap from its continuous reference, and tests a real component's fallback, interruption, and reduced-motion behavior.

CSS linear() easing can draw a spring silhouette

CSS linear() easing lets an animation advance through a sequence of output progress values at specified input times. If those points sample a damped spring response, the browser interpolates between them and the movement can have overshoot and settling. This is a useful way to author one repeatable CSS spring animation curve. It is an approximation of a chosen response, not a live spring simulation that reacts to current velocity or a changing target.

The design question is concrete: how can one bounded spring curve be fitted, inspected, and shipped with a safe fallback and reduced-motion treatment? Consider a small panel entering after an explicit click. Its transform moves from 24 pixels below to its resting position over 420 milliseconds. The motion needs a visible but quiet overshoot, and interruption must not produce an abrupt jump. The same shape could feel excessive on a full-screen panel, so amplitude and distance are separate design choices.

I treat the spring as a line drawing. First define the target continuous curve. Then sample it into linear easing stops, measure the interpolation error, and test the actual component at its real size. The figure below shows why an attractive sequence of points can still miss the peak between stops. Spring motion design covers the broader choice of spring parameters and interaction role.

The point of CSS linear() easing is authored predictability: a curve can be reviewed and versioned like any other design token.

Choose one bounded response and time domain

For CSS linear() easing, choose an underdamped unit-step response with a damping ratio between zero and one and a positive angular frequency. The response approaches one, and smaller damping allows more overshoot. The continuous formula is a reference curve, not something CSS evaluates per frame. Choose a finite design duration, sample only that interval, and end at the resting value. A curve that would keep ringing forever is not suitable as an unbounded interface animation.

Use normalized time t from zero to one, then map it to the 420-millisecond component duration. In the lab, damping and oscillation controls stay within finite ranges and the stop count is capped. Invalid values fail visibly rather than generating NaN in CSS. The displayed peak and settled value are computed from this exact declared curve; they are not measurements of a browser's perceptual smoothness.

One preset can be brisk for a compact control, another soft for a card, and a third playful for a creative surface. These are art-directed starting points, not universal tokens. Their timing should be evaluated beside the component's travel distance, scale, and surrounding content. A 12% progress overshoot over 24 pixels is only about 2.9 pixels; the same progress overshoot over 300 pixels becomes conspicuous.

View transition motion hierarchy helps assign motion weight to the navigation context before choosing a curve.

Sample the response into linear easing stops

CSS linear() easing accepts output progress values and input percentages. The linear easing stops must preserve the important extrema of the target curve. Uniform sampling is the simplest starting point: evaluate the reference curve at N evenly spaced times from zero to one, emit each value with its percentage, and preserve values above one or below zero if the intended property can tolerate overshoot. CSS Easing Level 2 defines this piecewise linear timing function and its interpolation. It does not secretly run the differential equation between points.

The first and last stops deserve explicit review. Start at zero so the element begins at its declared initial value. End at one so the final frame settles on the target. Do not clamp interior values to the zero-to-one interval, because that removes the spring-like overshoot. Do, however, clamp the input controls and output text length in an interactive generator so a malformed query cannot create an enormous style string.

A short generated example might read linear(0 0%, 0.61 20%, 1.12 40%, 1.05 60%, 0.98 80%, 1 100%). The numbers illustrate syntax; they are not claimed as samples from the lab's formula. The downloadable lab generates its own actual stop list and reports error. Paste that list into animation-timing-function or a transition after inspecting it.

CSS interpolate-size addresses a different problem: what property or size can interpolate. The easing curve cannot make a non-interpolable property animate.

Measure interpolation error where it matters

For CSS linear() easing, a stop count is a budget, not a quality guarantee. Build a piecewise linear reconstruction from the emitted points, sample it densely against the continuous reference, and report maximum absolute progress error and root-mean-square error. Mark where the maximum occurs. If it lands near the first overshoot peak, add stops there rather than blindly doubling every segment. The error plot below shows both lines and the gap.

The numerical error is only one check. A small progress error can still be visible when multiplied by a long travel distance, and a mathematically accurate overshoot may be inappropriate for the product. Convert the peak progress error to pixels for the component under review. Watch at real size, normal and reduced frame rates, and on a device that has enough performance pressure to expose stutter.

The lab compares three art-directed presets with the same measurement method. It keeps the reference, sampled reconstruction, and emitted CSS in one receipt, so a reviewer can see exactly what changed when a stop is added. It is possible to produce a nearly perfect numerical fit to a curve that should not be shipped; the component and task still decide.

SVG path morphing is a useful comparison: vector shape interpolation also needs matched structure and visual inspection beyond a numeric endpoint.

Apply it to one component and define fallback

A panel using CSS linear() easing should have a stable final layout before it animates. Animate transform and opacity where possible so surrounding content does not reflow with each frame. Use the sampled CSS linear() easing for the spatial transform and a calmer opacity curve if a single spring would make text appear to pulse. Keep the duration and travel distance in component-level tokens, rather than placing one dramatic easing function on every interaction.

Feature detection can check whether the browser accepts linear(0, 1) as an animation timing function. That only confirms syntax support; it does not prove the chosen motion is readable. A supported browser uses the sampled curve. The fallback can use a conservative cubic-bezier() with no overshoot. Test the fallback as a designed motion, not as an exception thrown to the browser.

Use a class or data attribute to connect state to animation. A user opening and closing a panel rapidly can interrupt the animation. The lab previews interruption by reading the current transform and starting a new Web Animations run from that position; it preserves position, not physical velocity. If that API is unavailable, the specimen settles immediately. A production interaction that needs velocity continuity requires a measured runtime animation approach rather than treating the sampled curve as a physics engine.

Keep the panel's focus behavior independent of the animation. Focus should move according to dialog semantics and user intent, not according to a visually appealing overshoot timestamp.

Treat reduced motion as an alternate choreography

A reduced-motion preference should remove the spatial overshoot. It does not require hiding the state change. For this panel, the alternative can place the content at its final position immediately and use a short opacity change, or no animation at all if the content needs immediate focus. The site should not attach a tiny-duration spring that still flashes the same large movement.

Test both preferences in the browser. If the preference changes during playback, cancel the active spatial animation and settle at the final state immediately. Confirm that the panel opens, closes, and receives focus in the same logical order. The reduced version must not leave an element visually hidden while it is keyboard-focusable. Also test zoom and a narrow viewport: a 24-pixel entrance distance may be fine on a desktop card but awkward when the panel fills most of a phone. Motion design and responsive layout meet in the actual component.

Avoid using color or motion alone to convey whether an action succeeded. The final state should have a visible label and an accessible name. A screen reader should not need to infer state from easing. The prefers-reduced-motion media feature supplies a user preference, and the component chooses a suitable alternate treatment.

The article's diagram marks the default and reduced paths with text and shape as well as color, so the design argument survives without motion playback.

Inspect interruption and property effects

CSS linear() easing that looks good in a single forward playback may fail in a real interface. Open, close before the peak, open again, and resize while the panel moves. Inspect computed transforms and the user's focus location at each transition. If a reverse action snaps or bounces in the wrong direction, use separate entrance and exit curves or simplify the motion. A single timing token does not need to own both directions.

Different CSS properties respond differently to overshoot. Transform values can extend past the target. Opacity is bounded for display, so a value beyond one does not create the same perceptual effect. Width or height animation can disturb layout and make the same curve feel like a page shift. The sampled function is just a progress mapping; property choice and distance complete the movement.

Record the actual duration, frame budget, travel distance, preset parameters, stop count, maximum fit error, fallback, and reduced-motion rule. Treat those as a motion specimen that can be reviewed in a pull request. When a designer changes the component size, rerun the visual review; the old numerical error does not predict the new perceptual effect.

The two reference documents define CSS Easing Level 2 and MDN's linear easing syntax. They support syntax and interpolation claims, while the specimen supplies the component-specific judgment.

Ship a curve as a reviewable design token

CSS linear() easing is most useful when the shape is deliberate and the job is bounded. For the panel, the receipt should show the chosen response, the emitted stops, fit error, travel distance, default and reduced choreography, fallback, and interruption test. It should also show at least one rejected curve and why: perhaps too much overshoot for text, too long a settle, or visible error near the peak.

A reviewer can then ask a specific question: does this easing help the person understand that the panel arrived, or does it draw attention to itself? If the latter, lower the travel distance or choose a simpler curve. There is no prize for the most physically plausible interface motion. A product surface often needs a restrained hint rather than an instrument-grade simulation.

The downloadable spring lab computes three presets, samples the continuous target into CSS, plots the reconstruction error, and lets you preview a bounded panel movement. Its numbers describe its own formula and sample count. Real browser playback, user preference, and interruption remain separate tests. Copy the generated CSS only after the component passes those checks.

This is the broader creative lesson: code can make motion inspectable without flattening it into a single metric. The math gives a shared object to discuss; the art direction decides whether it belongs.

Runnable local artifact — A sampled CSS timing function approximates one declared curve; it is not live physics or a perceptual guarantee.

Sample the continuous response, emit linear() control points, reconstruct by interpolation, and report max and RMS progress error.