Level up CSS transitions with cubic-bezier

Source: Dev.to

What is cubic‑bezier?

In CSS, cubic-bezier is used in the transition-timing-function or animation-timing-function property. It defines how intermediate values are calculated during a transition using a cubic Bézier curve.

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

The four numbers define two control points on a curve. The curve always starts at (0, 0) and ends at (1, 1), representing the beginning and end of the transition. The control points shape how the animation progresses between those states.

For a detailed explanation, see the MDN Web Docs on easing functions.

Examples that make a difference

Below are code snippets that replace the default easing with more expressive cubic‑bezier curves. Hover the elements in a live environment to see the effect.

Example 1 – Scale and rotate

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

Plain CSS

.icon {
  transition: transform 0.5s cubic-bezier(.68, -0.6, .32, 1.6);
}
.icon:hover {
  transform: scale(0.8) rotate(359deg);
}

Example 2 – Scale up

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

Plain CSS

.button {
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.button:hover {
  transform: scale(1.5);
}

Example 3 – Translate horizontally

Tailwind CSS

<!-- Tailwind example markup (add your own HTML) -->

Plain CSS

.pill {
  transition: transform 0.5s cubic-bezier(.87, 0, .13, 1);
}
.pill:hover {
  transform: translateX(2rem);
}

Note
Tailwind CSS provides better defaults with ease-{in,out,in-out} classes. See the Tailwind transition timing function docs.

The negative values in some cubic-bezier functions create a “bounce” effect that overshoots the target before settling, giving the animation a premium feel.

Finding the perfect curve

Instead of guessing values, try the interactive tool Easing Wizard. Drag the control points, watch the animation in real time, and copy the generated cubic-bezier values directly into your CSS.

The difference between the generic ease and a well‑crafted cubic-bezier curve is immediately noticeable—your interfaces will feel more responsive, alive, and professional.

Give it a try: replace a generic transition like

transition: all 300ms ease;

with a custom curve, for example:

transition: all 300ms cubic-bezier(.68, -0.6, .32, 1.6);

and see the improvement for yourself.