What is cubic-bezier and why is "ease" not enough?
Every CSS animation has a timing function (the acceleration curve). `ease`, `linear`, `ease-in-out` are presets, but in modern UI animations should feel natural (like the real world) - the element accelerates, decelerates, sometimes overshoots a bit.
cubic-bezier(x1, y1, x2, y2) gives you full control over the curve. You give it 4 numbers and the animation behaves exactly the way you want: slow start with a punchy end, the reverse, or a small "back" (overshoot then return, like a rubber band).
Here you get an interactive graph. Drag two colored control points to reshape the curve. Below, an animation ball shows your curve in motion. Y values outside 0-1 create bounce / back effects.
How to use
- Pick a preset from the right column (linear, ease-in, ease-out, bounce, back). Each is a classic curve.
- Drag the blue or violet dot on the graph to reshape the curve.
- Below, watch the animation ball using your curve. Replay button if it finished.
- The duration slider (100-3000ms) shows how the curve feels at different speeds.
- Copy the cubic-bezier(...) call and paste it into `transition-timing-function` or `animation-timing-function`.
When this helps
A Bezier curve is the difference between cheap and premium UI. Example: card hover with `transition: transform 200ms linear` vs `200ms cubic-bezier(0.4, 0, 0.2, 1)` (Material standard easing). Night and day:
- Modal pops in smoothly with `ease-out-cubic`. Fast start, soft landing = natural motion.
- Card returns after hover with `ease-in-cubic`. Slow start, fast end = gravity-like.
- Bouncy reveal with `ease-out-back` (y2 above 1). Element slides in, slightly overshoots, settles. Attention without annoyance.
- iOS-style spring is a stronger back/elastic. Often easier in Framer Motion (spring physics vs bezier).
- Material Design uses `cubic-bezier(0.4, 0, 0.2, 1)` (standard ease) for most components. Apple HIG has its own, similar values.
- Smooth scrolling (e.g. anchor links): `ease-in-out` gives a deliberate transition, noticeable without being slow.
After picking a curve, use it in `transition`, `animation` (with @keyframes) and Framer Motion (`ease: [0.4, 0, 0.2, 1]`). For editing @keyframes animations see the CSS animation builder.