Interactive Cubic Bezier Easing Function Playground
Visualize, drag, and fine-tune CSS transition-timing-function curves with real-time motion comparators, anticipation wind-ups, and custom overshoot springs.
Live side-by-side comparison with standard browser curves running at native 60/120 FPS.
Standard web default: moderate start, brisk acceleration, and gentle decelerated finish.
Uniform, steady motion with zero acceleration. Ideal for continuous spins or color tickers.
Starts slowly and accelerates toward the climax. Suitable for exiting or collapsing elements.
Begins at maximum velocity and smoothly brakes. Perfect for incoming banners and toast alerts.
Symmetric ramp: slow start, rapid transit in the middle, and gradual settlement at target.
Overshoots the target by +27.5% before snapping back. Gives UI cards tactile springiness.
Pulls backwards like drawing a bowstring before launching forward at high speed.
Classic animation curve: deep negative wind-up coupled with massive overshoot bounce.
Rapidly shoots +56% past end position then quickly contracts back like elastic rubber.
Subtle micro-overshoot (+12%) designed for clean modern button interactions and modals.
Google Material Design 3 emphasized transition: brisk start with elongated soft landing.
Entering navigation sheets and dialogue backdrops that arrive rapidly and settle.
Exiting items moving out of viewport with steady build-up and swift departure.
iOS style dynamic spring feedback mimicking tactile Haptic touch and sheet expansion.
Quadratic easing curve: gradual natural growth resembling physical gravity drop.
Quadratic deceleration: quick start with gentle, natural slowdown without rebound.
Balanced quadratic ease: comfortable acceleration and deceleration profile.
Near-instant leap into final position with extended settling glide. Very snappy.
Holds near starting position until dramatic burst of movement near completion.
Production-Ready Code Generator
Export curve directly into CSS, Tailwind, Framer Motion, WAAPI, SwiftUI, or Compose
/* CSS transition-timing-function */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);The Four Control Points
A CSS cubic-bezier is anchored between fixed endpoints P0(0, 0) and P3(1, 1). You define P1(x1, y1) and P2(x2, y2) to mold the rate of acceleration throughout the transition timeline.
Overshoot & Anticipation (Y > 1 or Y < 0)
While X represents normalized time and must strictly reside in [0, 1], Y values can extend beyond! Values Y > 1.0 create bouncy spring overshoots, while Y < 0.0 generate Disney-style anticipatory wind-ups.
GPU Acceleration & 60/120 FPS
Native CSS cubic-bezier curves run directly on the browser compositor thread when applied to transform and opacity, ensuring buttery-smooth 120Hz refresh rates without JavaScript garbage collection hiccups.