CSS cubic-bezier(0, 0, 1, 1) and Linear Animation

This article explains the CSS cubic-bezier(0, 0, 1, 1) timing function, detailing how its mathematical coordinate values translate into motion. You will learn the mechanics of the CSS Bézier curve system, why this specific set of coordinates eliminates acceleration and deceleration, and how it directly maps to the standard linear animation keyword.

In CSS transitions and animations, the animation-timing-function and transition-timing-function properties control the rate of change over time. A cubic Bézier curve is defined by four points: two fixed anchor points and two adjustable control points. The anchor points represent the start and end of the timeline:

• P0 (Start): Permanently fixed at coordinate (0, 0), representing 0% time elapsed and 0% animation progress.
• P3 (End): Permanently fixed at coordinate (1, 1), representing 100% time elapsed and 100% animation progress.

The cubic-bezier(x1, y1, x2, y2) function allows developers to define the two intermediate control points:

• P1: Defined by (x1, y1)
• P2: Defined by (x2, y2)

In the declaration cubic-bezier(0, 0, 1, 1), you place P1 at (0, 0) and P2 at (1, 1).

The Mathematical Mapping to Linear Motion

A cubic Bézier curve relies on control points acting like magnets that pull the motion path toward them. When P1 is set to (0, 0), it sits directly on top of the starting anchor point (P0). When P2 is set to (1, 1), it sits directly on top of the ending anchor point (P3).

Because the control points are identical to the anchor points, there is no directional pull away from the direct vector between the start and end. The mathematical curve flattens completely into a straight diagonal line described by the linear equation:

\[y = x\]

On this graph:

• The X-axis represents time (from \(0.0\) to \(1.0\)).
• The Y-axis represents animation progression (from \(0.0\) to \(1.0\)).

Because \(y\) changes in direct 1:1 proportion to \(x\), the slope (or derivative) remains constant at all times (\(\frac{dy}{dx} = 1\)). A constant slope means zero acceleration and zero deceleration. The animated property moves at the exact same velocity from the first millisecond to the last.

Equivalence to the linear Keyword

In standard CSS specifications, the keyword linear is an alias for cubic-bezier(0, 0, 1, 1). The browser executes the following two rules identically:

.box-keyword {
  transition: transform 2s linear;
}

.box-bezier {
  transition: transform 2s cubic-bezier(0, 0, 1, 1);
}

While writing linear is clearer and preferred for readability in standard web development, cubic-bezier(0, 0, 1, 1) serves as the foundational baseline when using visual curve-editor tools or generating programmatic animation curves.