Curve editor
cubic-bezier(0.25, 0.1, 0.25, 1)
Comparison
Each lane moves a fixed-size ball along a track — only animation-timing-function differs.
Your curve
cubic-bezier(0.25, 0.1, 0.25, 1)
ease
linear
Export
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
Guide
What it does
The Cubic Bezier Animator lets you design custom CSS easing curves with draggable control points and watch them compared against preset easings in real time. Fine-tune motion feel for transitions and animations without guessing coordinate values or reloading the page. All curve math and animation preview runs locally in your browser — no uploads and no external libraries required.
When to use it
- Crafting custom UI transition timing that feels more natural than ease-in-out
- Matching motion design specs from After Effects or prototyping tools
- A/B testing easing feel on buttons, modals, and page transitions
- Teaching or learning how cubic-bezier control points affect acceleration
- Replacing default CSS easings with brand-specific motion tokens
How to use it
- Drag the control points on the curve editor to shape your easing.
- Watch the comparison animation loop against linear, ease, and other presets.
- Read the live cubic-bezier(x1, y1, x2, y2) values as you adjust handles.
- Fine-tune coordinates numerically if you need pixel-perfect values from a spec.
- Copy the cubic-bezier() CSS value and paste it into your transition or animation rule.
Tips
- Y values outside 0–1 create overshoot effects — useful for playful bounces but jarring on subtle UI.
- Compare against ease-out for enter animations and ease-in for exit animations as starting points.
- The same cubic-bezier value works in CSS transitions, animations, and the Web Animations API.
- Save values in your design system as named tokens like --ease-emphasis for consistency.
FAQ
Can I use values in JavaScript?
Yes. cubic-bezier values work in CSS transitions and the Web Animations API easing parameter.
Why does my curve feel wrong?
Steep initial slopes cause fast starts; flat middle sections create slow mid-transitions. Adjust both control points.
Is anything sent to a server?
No. Curve editing and animation preview run entirely in your browser.
Do overshoot values work everywhere?
Modern browsers support y values outside 0–1 in cubic-bezier. Test target browsers if you rely on overshoot.