Cubic-bezier()
The CSS cubic-bezier() function defines a timing function using a cubic Bézier curve specified by two control points.
CSS in Depth, Second Edition
The CSS cubic-bezier() function defines a timing function from the coordinates of two control points.
- How it is used
- Shapes CSS transition timing to match user responses, system events, fades, and expressive motion.
- How deep it goes
- Explains control-point editing, curve behavior, selection guidance, and a worked bounce example without developing formal curve mathematics.
- Examples
- Uses editable DevTools curves and navigation labels that slide, fade, overshoot, and settle.
- What you can do after
- Apply it via CSS to create reusable transition curves, including deceleration, acceleration, and controlled bounce.
Read how CSS in Depth, Second Edition explains cubic-bezier() →
Math for Web Design
cubic-bezier() is a CSS timing-function that defines an animation progression with a cubic Bézier curve.
- How it is used
- Shapes CSS transitions and animations so interactive motion feels fast, smooth, responsive, or deliberately exaggerated.
- How deep it goes
- Defines syntax, coordinate constraints, slope effects, and practical curve selection, but does not derive the Bézier equations.
- Examples
- Uses toggle switches, tooltips, shopping-cart bounce feedback, and fade-in animations to compare curve behavior.
- What you can do after
- Apply it in CSS to create, tune, and debug animation timing for interface feedback.
Related concepts
- transitionused by · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- timing functionimplements · A CSS timing function maps elapsed time to progress through a transition or animation.
- CSSuses · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- Bézier curveuses · A Bézier curve is a parametric curve whose shape is determined by control points through Bernstein basis functions.
- control pointhas part · A control point is a point whose position influences the shape, direction, or local behavior of a curve or other parametric geometric representation.
- animation propertyconfigures · The CSS animation property is a shorthand property for configuring one or more animations on an element.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.