Skip to main content

Glossary · motion

cubic-bezier()

A CSS timing function that defines a custom motion curve via four control points (x1, y1, x2, y2).

`cubic-bezier(x1, y1, x2, y2)` lets a designer compose the entire shape of an animation's acceleration curve. The defaults (ease, ease-in, ease-out, linear) cover most cases, but catalogued sites in AI2 Design routinely define custom curves: Linear's primary easing is `cubic-bezier(0.25, 0.46, 0.45, 0.94)`, Raycast uses an ease-out-expo `cubic-bezier(0.19, 1, 0.22, 1)`. A constrained easing palette becomes a brand fingerprint more recognisable than a logo.

External reference

MDN — cubic-bezier()

Catalogued examples

2 catalogued sites demonstrate cubic-bezier() in production.

All glossary terms

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.