cubic-bezier() is a CSS timing function for shaping animation progress. It fixes the curve’s endpoints at (0,0) and (1,1), then uses two control points to determine how quickly motion starts, changes, and finishes. section 11.2 section 11.2.1
Use four numbers in cubic-bezier(x1, y1, x2, y2):
- Keep x1 and x2 within [0, 1]. section 11.2.1
- Use y1 and y2 to shape acceleration and deceleration; values below 0 create anticipation, while values above 1 create overshoot. section 11.2.1
- Read steep slopes as rapid changes and level slopes as slower motion. section 11.2.1
Snappy toggle animation
transition: transform 1000ms cubic-bezier(0.2, 0.9, 0.1, 1.0); creates a fast-starting, slow-finishing toggle motion. A shorter duration, such as 250ms, is suggested for production use. section 11.2.1
Responsive interaction feedback
A tooltip uses cubic-bezier(0.4, 0.0, 0.2, 1) with a short 0.15-second transition for immediate, controlled feedback. For a shopping-cart confirmation, cubic-bezier(0.7, -0.5, 0.25, 1.5) supplies bounce and overshoot. section 11.3.3 section 11.4
cubic-bezier(x1, y1, x2, y2)
Inspect the compact four-parameter syntax and the relationship between control points and the resulting curve. section 11.2.1
