How to Use the CSS Cubic-Bezier Curve Easing Visualizer & Motion Simulator
-
1
Drag control points P1 (red) and P2 (blue) on the coordinate plane to shape your transition curve.
-
2
Click "▶ Test Motion" to watch a square animate across the preview track with your exact timing curve.
-
3
Compare against standard presets: ease-in-out, ease-out-back (spring bounce), and linear.
-
4
Copy the `transition-timing-function: cubic-bezier(...)` CSS snippet.
Practical Example & Use Case
Common Real-World Scenario
Creating a high-end springy ease-out bounce for modal window popups: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
Technical Notes & Limitations
Browser Engine Architecture
Visualizes coordinate domain $[0, 1]$ with elastic overshoots $y > 1$.
Frequently Asked Questions
Can Y coordinates exceed 1.0 in cubic-bezier?
Yes! Setting y1 or y2 above 1.0 creates a spring-like bounce effect where the animation temporarily overshoots its target value before settling.