Quick Answer

The CSS ease keyword equals cubic-bezier(0.25, 0.1, 0.25, 1), which starts slow, accelerates through the middle, and decelerates at the end. The ease-in-out keyword equals cubic-bezier(0.42, 0, 0.58, 1) for symmetric acceleration and deceleration.

Preset Curves

Choose a Preset Custom linear ease ease-in ease-out ease-in-out ease-in-back ease-out-back ease-in-out-back

Control Points

X1

Y1

X2

Y2

X values must be between 0 and 1. Y values can exceed this range for overshoot effects.

Preview

Common Examples

Input	Result
ease (0.25, 0.1, 0.25, 1)	transition: all 0.4s ease;
ease-in (0.42, 0, 1, 1)	transition: all 0.4s ease-in;
ease-out (0, 0, 0.58, 1)	transition: all 0.4s ease-out;
ease-in-out (0.42, 0, 0.58, 1)	transition: all 0.4s ease-in-out;
custom bounce (0.68, -0.55, 0.265, 1.55)	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

How It Works

CSS timing functions define how an animation or transition progresses over time. The cubic-bezier() function uses a cubic Bezier curve defined by two control points to map time (input, 0 to 1) to progress (output, 0 to 1).

The Cubic Bezier Curve

cubic-bezier(x1, y1, x2, y2)

The curve always starts at (0, 0) and ends at (1, 1). The two control points (x1, y1) and (x2, y2) shape the curve between these endpoints:

• x1, x2 represent time and must be between 0 and 1
• y1, y2 represent progress and can exceed the 0-1 range to create overshoot/bounce effects

CSS Keyword Equivalents

The five built-in CSS timing keywords each map to specific cubic-bezier values:

• linear = cubic-bezier(0, 0, 1, 1): constant speed, no acceleration
• ease = cubic-bezier(0.25, 0.1, 0.25, 1): slow start, fast middle, slow end
• ease-in = cubic-bezier(0.42, 0, 1, 1): starts slow, accelerates to the end
• ease-out = cubic-bezier(0, 0, 0.58, 1): starts fast, decelerates to the end
• ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): slow start and end, fast middle

How to Read the Curve

The horizontal axis represents time (0% to 100% of the animation duration). The vertical axis represents progress (0% to 100% of the property change). A steep section of the curve means fast movement; a flat section means slow movement.

Overshoot Effects

When y1 or y2 exceeds the 0-1 range, the animation temporarily goes past its target before settling. For example, cubic-bezier(0.68, -0.55, 0.265, 1.55) creates an ease-in-out with overshoot at both ends, where the element moves slightly backward before starting and slightly past the target before settling.

Worked Example

For a custom “ease-out-back” curve with cubic-bezier(0.175, 0.885, 0.32, 1.275): x1 = 0.175, y1 = 0.885 (the first control point pulls the curve upward early, creating fast initial progress). x2 = 0.32, y2 = 1.275 (the second control point exceeds 1.0, causing the animation to overshoot its target by about 27.5% before settling back). This creates a natural “spring” effect where the element moves quickly, overshoots slightly, then settles into its final position.

Related Calculators

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing between two viewport widths.

Box Shadow Generator

Generate CSS box-shadow values with a live preview and one-click copy.

Frequently Asked Questions

What is the difference between ease and ease-in-out?

Both ease and ease-in-out start and end slowly with faster movement in the middle. The difference is in the curve shape: ease (0.25, 0.1, 0.25, 1) has an asymmetric curve that accelerates quickly and decelerates gently. ease-in-out (0.42, 0, 0.58, 1) is perfectly symmetric, with equal acceleration and deceleration phases. For most UI transitions, ease or ease-out feels more natural than ease-in-out.

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

Use ease-out for elements entering the screen (they arrive quickly and settle gently). Use ease-in for elements leaving the screen (they start slowly and accelerate out of view). For elements that move within the viewport, ease or ease-out typically feels the most natural. The general guideline is: ease-out for entrances, ease-in for exits.

What do Y values outside 0-1 do?

Y values below 0 or above 1 create overshoot effects. A y2 value of 1.5 means the animation will temporarily reach 150% of its target value before settling back to 100%. This creates springy, bouncy motion. X values must stay between 0 and 1 (they represent time), but Y values are unrestricted.

Can I use cubic-bezier with CSS animations, not just transitions?

Yes. The animation-timing-function property accepts the same values as transition-timing-function, including cubic-bezier(). You can also set different timing functions for individual keyframes within a @keyframes rule.

What is a good default timing function for UI animations?

For most UI transitions, ease-out or cubic-bezier(0.25, 0.1, 0.25, 1) (the ease keyword) works well. These curves match how physical objects decelerate, making digital motion feel natural. A duration of 200ms to 400ms paired with ease-out covers most hover states, dropdown menus, and modal appearances.