Tools
Easing Studio
Shape a classic cubic-bezier(), or generate what it cannot express: a spring that
overshoots and settles, and a bounce. Both come out as a linear() easing you can paste into any
transition or animation.
Widely availablesince Jun 2026Widely availablesince Mar 2018
Why a spring needs linear()
A cubic-bezier() is a single curve between two points with two handles. It can start slowly,
finish slowly, even overshoot once, but it cannot cross its target, come back and cross again, because one
cubic curve has at most that much shape in it. A spring does exactly that, and so does a bounce.
linear() takes a list of stops instead, joined by straight lines, so with enough stops it can
follow any motion. The studio keeps the fewest stops that stay within a quarter of a percent of the true
curve.
The duration is part of the easing
With a bezier you pick a duration and the curve stretches to fit. A spring does not work that way: stiffness, damping and mass decide how long it takes to settle, and playing it over any other time makes it a different spring. That is why the spring output gives you two custom properties, the easing and the duration that goes with it. Use them together.
Respect reduced motion
Overshoot and bounce are exactly the motion that prefers-reduced-motion exists for. Keep the
destination and drop the journey: inside that media query, set the transition to a short plain fade. See
@starting-style for entry animations and the
keyframes generator for the rest.