Physics & Math
Cubic Bezier Curve
Canonical Definition
A mathematical parametric curve defined by four control points used in CSS transitions and Web Animations to dictate the rate of change over a fixed duration.
Detailed Explanation & Context
A cubic bezier curve defines the timing function of a duration-based animation. Given control points P0(0,0), P1(x1,y1), P2(x2,y2), and P3(1,1), it interpolates an animation value from start to finish over a pre-determined duration. While ubiquitous in legacy web design, cubic beziers cannot dynamically adapt to user finger velocity or interruptible gestures like spring physics can.
Mathematical Model / Governing Formula
cubic-bezier(x1, y1, x2, y2) — e.g. cubic-bezier(0.25, 0.1, 0.25, 1.0)Key Takeaways
- Governed by four 2D coordinates representing start, end, and two handle vectors.
- Fixed to a predetermined duration in milliseconds.
- Replaced by spring physics in modern native iOS and advanced web interfaces.
Implementation Syntax (CSS)
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);Related Glossary Terms
Pillar Guides & Tools
Apply Cubic Bezier Curve in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.