The CSS cubic-bezier() property is a function used to define a custom timing function (easing) for CSS animations and transitions, giving precise control over the rate of change of a property over time. 

Syntax

The cubic-bezier() function accepts four mandatory numeric parameters representing the coordinates of two control points, P1 and P2: 

cubic-bezier(x1, y1, x2, y2);

Parameters

• x1: The x-coordinate of the first control point (P1). Must be a number between 0 and 1.
• y1: The y-coordinate of the first control point (P1). Can be any number, including negative or greater than 1, to create bounce or overshoot effects.
• x2: The x-coordinate of the second control point (P2). Must be a number between 0 and 1.
• y2: The y-coordinate of the second control point (P2). Can be any number, including negative or greater than 1. 

Key Concepts

• Fixed Endpoints: In CSS, the curve is defined by four points: P0, P1, P2, and P3. P0 is always fixed at (0, 0) (start time, start state), and P3 is always fixed at (1, 1) (end time, end state).
• Control Points: (x1, y1) and (x2, y2) are the "handles" that shape the curve between the fixed start and end points.
• Axes: The horizontal x-axis represents the time progress of the animation (from 0 to 1, or 0% to 100%), and the vertical y-axis represents the output progress (the change in the CSS property value, from 0% to 100%). 

Usage

The cubic-bezier() function is used with the animation-timing-function and transition-timing-function properties. 

.element {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* or */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Standard Easing Equivalents

Many common easing keywords are simply predefined cubic-bezier() functions: 

Advanced Effects

By setting y1 or y2 values outside the standard [0, 1] range, you can create dynamic effects like bouncing or overshooting the final value before settling. 

The cubic-bezier() function in CSS allows you to create custom timing curves for transitions and animations, offering precise control over speed changes. 

Core Concept

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. 

• P0 (0,0): The start of the animation (fixed).
• P3 (1,1): The end of the animation (fixed).
• P1 (x1, y1) & P2 (x2, y2): The two "control points" you define to shape the curve. 

Syntax & Parameters

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Use code with caution.

Behavioral Mechanics

• Time (X-axis): Represents the duration from 0% (start) to 100% (finish).
• Progress (Y-axis): Represents the property's value (e.g., 0px to 100px).
  • Negative values (< 0): Create a "pull-back" or anticipation effect before the animation begins.
  • Values > 1: Create an "overshoot" or bouncing effect past the final value. 

Equivalent Keyword Presets

CSS provides built-in keywords that are shorthand for specific cubic-bezier values: 

• linear: cubic-bezier(0, 0, 1, 1) — Constant speed.
• ease: cubic-bezier(0.25, 0.1, 0.25, 1) — Default; slow start, then fast, then slow end.
• ease-in: cubic-bezier(0.42, 0, 1, 1) — Slow start.
• ease-out: cubic-bezier(0, 0, 0.58, 1) — Slow end.
• ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) — Slow start and end. 

Pro Tools

Because visualizing math-based curves is difficult, designers use specialized tools: 

• Cubic-bezier.com: A visual playground to drag handles and compare curves side-by-side.
• Browser DevTools:: Most modern browsers (Chrome, Firefox) have a built-in Bezier editor in the Styles pane next to any timing function property.