What does a cubic-bezier curve actually represent?

It maps elapsed time (the horizontal x axis, 0 to 1) to animation progress (the vertical y axis, 0 to 1). A straight diagonal line is linear — constant speed. Bending the curve changes how the value accelerates and decelerates: a curve that rises slowly then steeply is ease-in (starts slow), and the reverse is ease-out (ends slow). The two handles are the control points, written as cubic-bezier(x1, y1, x2, y2) in CSS. Dragging them in this tool updates that string live.

How do I make an animation overshoot or bounce?

Drag a handle above the top guide line so its y value goes beyond 1 (or below 0 for an anticipating wind-up). Because y is progress, a value over 1 means the property travels past its target and then settles back — that is the "back" easing or bouncy feel. The playful presets (Back Out, Bouncy, Snappy) are pre-built examples. Note that true springy, multi-bounce motion is better modeled with a spring animation, since a single cubic-bezier can only overshoot once.

What transition duration should I use?

For interactive UI, the 100 to 500ms range is the sweet spot: long enough to perceive the motion, short enough to still feel instant. Small elements (buttons, icons, toggles) want the faster end, around 100 to 200ms; larger moves (modals, drawers, page transitions) can take 300 to 500ms. Under 100ms the easing is barely perceptible, and over 500ms interactive feedback starts to feel sluggish. The guidance card flags where your chosen duration falls.

When should I use ease-in versus ease-out?

Use ease-out (fast start, slow finish) for elements entering the screen or responding to a user action — it feels immediate and lands gently. Use ease-in (slow start, fast finish) for elements leaving the screen, since accelerating away reads as natural exit. ease-in-out is symmetrical and good for moves that both start and end on screen, like a card flipping or an accordion expanding. As a default, ease-out covers most UI feedback well.

Which output format should I copy?

Use the CSS transition for simple hover/state changes; use CSS @keyframes when you want an animation that plays on its own (including looping). Tailwind gives you a config entry (v3) plus an @theme variable (v4) and an arbitrary-value class. Framer Motion outputs a transition object with the ease array for React. The Web Animations API output is a vanilla JS element.animate() call. All of them carry the same curve, duration, and delay, plus a prefers-reduced-motion fallback where relevant.

Why does every export include prefers-reduced-motion?

Some people experience motion sickness, vertigo, or distraction from animation, and they set an OS preference to reduce motion. Honoring it is a WCAG 2.3.3 (Animation from Interactions) best practice. The exports wrap the transition or animation in an @media (prefers-reduced-motion: reduce) block that disables it, so your UI stays usable and comfortable for everyone without you having to remember to add it.

Transition & Easing Studio

Design CSS easing the visual way: drag a cubic-bezier curve, watch a demo element play your transition in real time, and get the recommended duration with motion-design guidance. Export to a CSS transition, @keyframes, Tailwind v3 + v4, Framer Motion, or the Web Animations API.

About this ToolHow it works, benefits & use cases

Most easing pickers show you a curve and a code string. This one is a studio: you drag the two handles of a cubic-bezier curve and a real demo element plays your transition the instant you let go, so you tune motion by feel instead of by guessing numbers. Pull a handle above the top guide line and the value overshoots and settles back — the classic "back" or bouncy feel — and the live preview shows exactly that. A categorized easing library (standard, Material, iOS, and playful curves) gives you a great starting point, and editable x1/y1/x2/y2 fields stay in sync with the drag. Alongside the curve you set duration and delay with sliders and get motion-design guidance grounded in Material and Apple ranges: under 100ms feels instant, 100 to 500ms is the responsive sweet spot, and over 500ms starts to drag. You choose what the demo animates — move, scale, fade, rotate, color, or a combo — and which CSS property the output targets. Then export the result as a CSS transition, CSS @keyframes, a Tailwind v3 config plus v4 @theme, a Framer Motion transition, or a Web Animations API call. Every export includes a prefers-reduced-motion fallback, and the whole setup lives in a shareable URL.

How to Use

1Pick a starting curve from the easing library, or just drag the two handles on the curve graph.
2Watch the demo element replay your transition automatically; hit Replay or enable Loop to keep it running.
3Set duration and delay with the sliders and read the guidance card — aim for the 100 to 500ms sweet spot.
4Choose what the demo animates and which CSS property the output targets (transform, opacity, color, or custom).
5Select an output format (CSS, @keyframes, Tailwind, Framer Motion, or Web Animations API) and copy, download, or share it.

Key Benefits

Drag a real cubic-bezier curve and see a demo element play it instantly
Overshoot handles (y above 1) for back/bouncy easing, visualized live
Categorized easing library: standard, Material, iOS, and playful presets
Motion-design duration guidance grounded in Material and Apple ranges
Pick the demo effect (move/scale/fade/rotate/color/combo) and the target CSS property
Exports to CSS, @keyframes, Tailwind v3 + v4, Framer Motion, and the Web Animations API
Every export ships a prefers-reduced-motion fallback, and the config is shareable via URL

Common Use Cases

Designing a button hover or card-lift transition that feels snappy
Dialing in a playful overshoot for a modal or toast entrance
Matching Material or iOS motion guidelines on a cross-platform UI
Getting the exact cubic-bezier and duration for a Framer Motion transition
Producing a Tailwind timing-function + duration pair for a design system

Live preview

cubic-bezier(0.34, 1.56, 0.64, 1)

Easing curvedrag the handles

x1y1x2y2

Easing library

Standard

Material

iOS

Playful

Best for: Pop-in with a little overshoot

Timing

Duration400ms

Delay0ms

In the 100-500ms sweet spot: responsive yet smooth. Most UI transitions live here.

What animates

Demo effect

CSS property

Loop the preview

Output format

CSS transition output

Copy, download, share, or pipe to another tool

.box {
  transform: translateX(0);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.box:hover,
.box.is-active {
  transform: translateX(140px);
}

@media (prefers-reduced-motion: reduce) {
  .box { transition: none; }
}

Easing is what makes motion feel real

A cubic-bezier() curve maps elapsed time (x) to progress (y). A straight line is linear; bending the handles makes the motion accelerate or decelerate. Pulling a handle abovethe top line (y > 1) makes the value overshoot and settle back — that is the “back” / bouncy feel. Drag the two handles on the curve and the demo plays it instantly.

Pick a duration that feels responsive

Most UI transitions belong in the 100–500ms range — long enough to read the motion, short enough to feel instant. Use ease-out for things entering the screen and ease-in for things leaving. Always keep a prefers-reduced-motion fallback, which every export here includes.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Transition & Easing Studio

How to Use

Key Benefits

Common Use Cases

Easing library

Timing

What animates

Easing is what makes motion feel real

Pick a duration that feels responsive

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Transition & Easing Studio