CSS Bounce Easing Effect with Overshoot

Creating Bounce with cubic-bezier

A bounce or overshoot effect occurs when the y2 value exceeds 1 (or y1 goes below 0). The animation temporarily goes past its endpoint before settling into place.

The Values

transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

This is the classic easeOutBack curve. The key is y2 = 1.275 — the animation overshoots its target by about 27.5% of the total change before returning.

How Overshoot Works

In a standard cubic-bezier, both y values stay between 0 and 1. When y2 exceeds 1, the progress function outputs values greater than 100% near the end of the animation. For a translateX(0) to translateX(100px) transition, the element would momentarily move to approximately translateX(127.5px) before settling at translateX(100px).

Overshoot Amount by y2 Value

y2 value	Overshoot	Character
1.1	~10%	Subtle bounce
1.275	~27.5%	Moderate bounce
1.5	~50%	Pronounced bounce
1.7	~70%	Exaggerated bounce

Code Example

.notification {
  transform: scale(0);
  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.notification.show {
  transform: scale(1);
}

The element scales from 0 to 1, momentarily exceeding scale(1) before settling, creating a satisfying "pop" effect.

Caveat

Overshoot can cause layout issues if the overshooting property affects layout (e.g., width, height). Prefer transforms (scale, translate) or non-layout properties (opacity, box-shadow) to avoid reflow.