Drag the two handles. y values outside 0–1 create overshoot (back / anticipate).
Lower damping = more bounce. The spring is simulated, then traced as a compact linear().
Classic ease-out bounce (a ball settling), traced to linear(). Adjust the duration below to taste.
Cubic Bézier vs linear()
cubic-bezier() is a single smooth curve defined by two control points. It is perfect
for eases and even mild overshoot, but it is mathematically a single hump: it cannot wobble back
and forth, so a real spring or a multi-bounce ball is out of
reach.
The linear() easing function fills that gap. Despite the name, it lets you list many
points and the browser draws straight segments between them, so you can trace any shape, including
a spring that overshoots and settles. This tool simulates the spring (or bounce), then traces it
with as few points as possible using curve simplification, so the output stays compact and
accurate rather than dumping 100 stops.
The animation preview uses your device's real animation engine, so what you see is exactly what
ships. In browsers that predate linear() the preview falls back to ease,
but the copied value is still correct for modern browsers.
Browser support
Cubic-bezier and the keyword eases are baseline everywhere. Only linear() is recent.
| Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| cubic-bezier() / keywords | Yes | Yes | Yes | Yes |
| linear() easing | 113+ | 113+ | 112+ | 17.2+ |