〰️ CSS Easing & Animation Timing Generator

Complete Guide: CSS Cubic-Bezier Editor

Every CSS transition and animation has a timing function that controls the pace of change over time. The cubic-bezier() function gives you precise control over this pace, letting you create easing effects that feel natural, playful, or mechanical — far beyond what the named keywords like ease or ease-in-out can express. Understanding cubic Bézier curves is essential for motion design that feels polished and intentional.

Understanding the Four Control Points

A cubic Bézier curve in CSS is defined by four values: cubic-bezier(x1, y1, x2, y2). The curve always starts at point (0, 0) and ends at point (1, 1) — representing the start and end of the transition. The two control points P1 (x1, y1) and P2 (x2, y2) pull the curve toward them without being on the curve itself. The X axis represents time (0 = start, 1 = end), and the Y axis represents progress (0 = initial value, 1 = final value).

• A steep slope = fast change
• A flat slope = slow change
• A diagonal straight line = linear (constant speed)

Named Easing Functions as cubic-bezier Equivalents

CSS's named easing keywords are just shorthand for specific cubic-bezier values:

• linear = cubic-bezier(0, 0, 1, 1)
• ease = cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in = cubic-bezier(0.42, 0, 1, 1)
• ease-out = cubic-bezier(0, 0, 0.58, 1)
• ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

ease-in vs ease-out: The UX Difference

ease-in starts slow and ends fast. Use it for elements leaving the screen — a slow start acknowledges the user's interaction, while a fast exit feels responsive. ease-out starts fast and ends slow. Use it for elements entering the screen — quick arrival grabs attention while decelerating to a gentle stop. ease-in-out suits elements that change state within the viewport (not entering or leaving), like an accordion opening or a toggle switching.

Overshoot: y Values Greater Than 1

When a Y control point exceeds 1 (or goes below 0), the animation overshoots its target value before settling. This creates a bounce or elastic effect:

/* Bounce overshoot effect */
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

The Y axis can go above 1 or below 0 to create overshoot. Note: the X axis must stay between 0 and 1 (time cannot go backward), but the Y axis has no such constraint.

Spring Animations vs Cubic-Bezier

CSS cubic-bezier transitions have a fixed duration — the animation always takes exactly the specified time regardless of the element's current state. Spring animations (available in JavaScript via libraries like Framer Motion or the Web Animations API with spring physics) have velocity-based duration: an element interrupted mid-animation continues with its current velocity. For most UI transitions, cubic-bezier is sufficient. Use springs when you need truly natural feel for drag-and-drop or gesture-based interactions.

CSS steps() for Sprite Animations

The steps() timing function creates discrete jumps rather than smooth interpolation — perfect for sprite sheet animations:

.sprite {
  background-position: 0 0;
  animation: walk 0.5s steps(8) infinite;
}

@keyframes walk {
  to { background-position: -800px 0; }
}

With 8 frames at 100px each, steps(8) jumps 100px per step, cycling through all sprite frames.

To generate the animated spinners and loaders that use these timing functions, see the CSS Loader tool. For complete box shadow effects that complement your transitions, visit the Box Shadow Generator.