Open menu

CSS Cubic-bezier Editor

Shape the timing of your transitions and animations with a visual cubic-bezier editor. Drag the two control points, or move them with the arrow keys, and watch three balls race side by side so you can feel the difference between your curve, ease and linear. Start from 24 classic easings (sine, quad, cubic, expo, back) and design-system curves, then copy the result as a transition, a CSS custom property, a Tailwind class or a Web Animations API call.

Preset gallery

cubic-bezier(0.22, 1, 0.36, 1)

Your curve
ease
linear

Accessibility checks

  • Pass The curve stays between start and end: smooth, no overshoot.
  • Pass 800ms feels responsive for interface motion.
  • Pass The exported CSS removes the motion for people who prefer reduced motion.

Export code

.element {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* or in an animation */
.element {
  animation: slide 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
    animation: none;
  }
}
Favourites on this device (0)

No favourites yet.

Curve
Cubic-bezier curve
Timing

How to use the cubic-bezier editor

  1. Pick a starting curve from CSS keywords, ease-in, ease-out, ease-in-out or design-system curves.
  2. Drag the two handles on the graph, or focus one and use the arrow keys (Shift for bigger steps). You can also type exact values.
  3. Watch the race. The top ball uses your curve; the others use ease and linear for comparison.
  4. Set the duration and property for the exported transition.
  5. Export CSS (transition and animation examples with a reduced-motion rule), a custom property, Tailwind or JavaScript.

How the curve works

The horizontal axis is time and the vertical axis is progress. A steep start means fast motion at the beginning; a flat end means a gentle landing. Handles above the top line or below the bottom create overshoot and anticipation.

Worked examples

Example 1: a snappy dropdown

Use Out quint (0.22, 1, 0.36, 1) with 200ms. The menu appears almost instantly and settles softly, which feels responsive.

Example 2: a playful button press

Use Out back with 300ms on a scale transform. The slight overshoot gives a tactile bounce. Keep it to small elements.

Example 3: a consistent motion system

Export Material standard as a custom property (--ease-standard) and use it in every transition, so all motion in your product shares one personality.

Accessibility

Some people get dizzy or distracted by motion. The CSS export includes a prefers-reduced-motion rule that removes transitions and animations for them. For essential feedback, replace movement with a fade or an instant change.

Common mistakes

  • Using linear for UI motion. Real objects accelerate and decelerate, so linear motion looks mechanical. Keep it for spinners and progress.
  • Long, slow easings on frequent actions. People wait for them every time; keep repeated interactions under 300ms.
  • Mixing many curves. Pick two or three and reuse them.

Matching motion to purpose

Use ease-out curves for things entering the screen, so they arrive quickly and settle gently. Use ease-in for things leaving, and ease-in-out for objects moving from one place to another. Keep most interface motion between 150 and 400 milliseconds, and always provide a reduced-motion alternative.

Frequently asked questions

What do the four cubic-bezier numbers mean?

They are the coordinates of two control points: x1, y1, x2, y2. The curve always starts at (0, 0) and ends at (1, 1). x is time and must stay between 0 and 1; y is progress and can go outside that range to create overshoot or anticipation.

Which easing should I use for UI?

Ease-out curves (fast start, gentle stop) feel responsive for things entering or reacting to input. Ease-in suits things leaving. Ease-in-out suits movement from one place to another on screen.

Why does my animation bounce past the end?

A y value above 1 makes the motion overshoot before settling, as in the back easings. It feels lively, but keep it subtle for interface elements.

How long should a transition be?

Most interface transitions feel best between 150 and 500ms. Longer durations suit large movements or decorative motion; the checker warns above one second.

Can I use steps() instead of a curve?

Yes. steps(n) jumps between n frames instead of easing smoothly, which suits sprite animations, typing effects and clocks.

Sources