Crafting Snappy UI Animations with Custom CSS Cubic-Bezier Easing

Linear animations feel mechanical and unnatural. Physical objects in the real world accelerate and decelerate due to inertia and friction.

Interactive easing curve editor:

• Build and test timing functions with the Cubic Bezier / Easing Generator

Anatomy of a Cubic Bezier Function

A cubic-bezier timing function is defined by two control points on a unit square: cubic-bezier(P1x, P1y, P2x, P2y).

• Time moves from x = 0 to x = 1
• Output progress moves from y = 0 to y = 1

/* Smooth decelerate (Enter transition) */
.modal-enter {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Snappy bounce overshoot */
.button-pop {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Test your custom curves against standard presets (ease-in-out, ease-out, spring) using the Cubic Bezier / Easing Generator.