Bounce & Overshoot Animations

Create playful spring/bounce motion by pulling control points past the box.

Nid oes angen mewngofnodi

Drag the teal & rose handles to shape the curve

Motion preview

Width transition

CSS value

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Presets

💡 The rose and teal handles can pull above or below the box (Y beyond 0-1) to create “overshoot” / bounce effects like back-out and anticipate. X stays within 0-1 (time can’t reverse).

Bounce Effects tips

🤸

Drag a handle above the top of the grid to make the value overshoot 100% then settle — that's the bounce/back effect.

💡

Try the "back-out" and "anticipate" presets as starting points, then fine-tune.

🎯

Overshoot works great for modals, toasts, and "added to cart" confirmations — it draws the eye.

Sut Mae'n Gweithio

Ewch i mewn

Enter your data into the tool above. Everything stays local to your browser.

Proses

The tool processes your data instantly in your browser using JavaScript. No server, no waiting.

Lawrlwythwch

Get your result instantly. Nothing is stored after you leave the page — complete privacy.

Pam defnyddio ein un ni?

✓Hollol rhad ac am ddim - dim costau cudd, byth

✓Nid oes angen cyfrif, e-bost na mewngofnodi

✓Nid yw ffeiliau byth yn gadael eich dyfais

✓Dim cyfyngiadau maint ffeil o gwbl

✓Dim dyfrnodau ar unrhyw allbwn

Also check out…

🎨

Custom CSS Transition Easing

Design natural-feeling easing for hover effects, m

🎬

Easing for @keyframes Animations

Pick the right animation-timing-function for CSS k

⚙️

Easing Values for JS Animation Libraries

Get cubic-bezier values for GSAP, Framer Motion, a

📚

Understand How Easing Works

See the relationship between a bezier curve and th

Cwestiynau Cyffredin

Back to CSS Cubic-Bezier Easing Generator