Cubic-bezier()

As explained in CSS in Depth, Second Edition

The CSS cubic-bezier() function defines a timing function from the coordinates of two control points.

The CSS cubic-bezier() function defines a custom timing function from four values representing two control points. Adjusting a handle changes how quickly a transition progresses over time, rather than merely choosing a preset such as ease-in or ease-out. section 15.2.1

Choose a curve according to the interaction:

• Use linear for color changes and fade-in or fade-out effects. section 15.2.1
• Use a decelerating curve for user-initiated changes, such as clicks and hovers, so the response begins quickly and settles smoothly. section 15.2.1
• Use an accelerating curve for system-initiated changes, such as loaded content or timeout-triggered motion. section 15.2.1
• Reuse a small set of curves for consistency, while allowing ease-in-out or bounce effects when the motion calls for them. section 15.2.1

A subtle bounce on navigation labels

A hidden label can begin at translate: -1em and opacity: 0, then transition to translate: 0 and opacity: 1. The custom cubic-bezier(0.2, 0.9, 0.3, 1.3) curve moves the label slightly beyond its final position before it settles, adding weight and momentum. Slow the transition to make the subtle bounce easier to observe. section 16.2.2

Figure 15.5 Editing a Bézier curve in the Chrome DevTools

Edit the curve in Chrome DevTools by dragging its control-point handles, then inspect the resulting cubic-bezier() value. section 15.2.1

How CSS in Depth, Second Edition covers it

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 it assumes

Assumes familiarity with CSS transitions and transforms while demonstrating curve editing through visible browser behavior.

What you can do after

Apply it via CSS to create reusable transition curves, including deceleration, acceleration, and controlled bounce.

How it connects

Connects timing functions with CSS transitions, CSS transforms, opacity, pseudo-classes, and browser developer tools.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Math for Web Designcubic-bezier() is a CSS timing-function that defines an animation progression with a cubic Bézier curve.

Compare how 2 books explain cubic-bezier() →

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.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.