Cubic Bezier Curve Editor

Why `ease-out` Is Almost Always the Right Answer

If you only have time to learn one easing function, make it `ease-out`. It's a curve that starts fast and ends smoothly, and for good reason.

The speed at which the screen responds after a user clicks a button determines the "perceived responsiveness." If you use `ease-in` (starts slow), it feels like nothing happens for a moment after the click. Even with the same duration, an `ease-in` animation feels much more sluggish. In contrast, `ease-out` feels instantaneous because it shoots out immediately and then settles slowly.

Duration: Longer Isn't Better

The duration is just as important as the easing curve. And most people set it for too long. The 800ms default in the preview is for making the curves visually distinct, not for production use.

In a real UI, 200–300ms is the baseline. Below 100ms, users might not even notice an animation happened. Above 500ms, they start to wait. A user might see that screen dozens of times a day. A 600ms transition that seemed elegant at first becomes an obstacle by the tenth viewing.

• Under 100ms: For color changes or tiny state changes (like a checkbox). Basically instantaneous.
• 150–250ms: For hover effects, button feedback, and the appearance of small elements. The most common range.
• 250–350ms: For modals, dropdowns, and expanding cards. Medium-sized elements.
• 350–500ms: For full-screen transitions or page navigation. Anything longer is usually excessive.
• The farther an element travels, the slightly longer its duration should be. An element crossing the screen needs more time than one making a small move.

Overshoot (Elasticity): When to Use It and When to Avoid It

If you drag a control point into the margins above or below the graph, its y-value will go outside the 0–1 range. This creates an elastic effect where the animation overshoots its target before settling back. That's why this tool includes that extra space.

A classic example is `easeOutBack` (.34, 1.56, .64, 1). It gives a sense of physical weight by popping out slightly before settling into place.

• When to use it: For short, celebratory, or attention-grabbing moments like an "add to cart" confirmation, a "like" heart, or a notification badge.
• When to avoid it: In frequently repeated UI like modals, dropdowns, or tooltips. A constant bouncing effect quickly becomes annoying and distracting.
• When to *absolutely* avoid it: For large elements. A panel that takes up half the screen bouncing in and out can cause motion sickness.
• In animations that shift the layout: The overshoot can push adjacent elements, causing the entire screen to jiggle as they shift back and forth.

What You Can't Do with a Single Cubic Bezier

You can't create a true bounce effect with `cubic-bezier`. A ball bouncing multiple times on the ground requires a curve that goes up and down repeatedly, and a cubic-bezier curve simply can't form that shape. It can only overshoot once.

For that kind of motion, you need other methods.

/* Multiple bounces — not possible with cubic-bezier, use keyframes */
@keyframes bounce-in {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.08); opacity: 1; }
  70%  { transform: scale(.96); }
  85%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.pop { animation: bounce-in 400ms ease-out both; }

Some Users Prefer Reduced Motion

For people with vestibular disorders, on-screen motion can cause actual dizziness and nausea. That's why operating systems have a "Reduce Motion" setting, which browsers expose to CSS via the `prefers-reduced-motion` media query.

For users who enable this setting, you should disable or drastically shorten your animations. A simple cross-fade is often better than removing movement entirely, as it helps maintain context without being jarring.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}