Question 1

What is a cubic-bezier easing curve in CSS?

Accepted Answer

A cubic-bezier() timing-function describes how an animation's progress changes over time. The horizontal axis is elapsed time (0 to 1) and the vertical axis is the animated property's progress. Two control points, written cubic-bezier(x1, y1, x2, y2), bend the curve between the fixed start (0,0) and end (1,1) to create acceleration, deceleration or bounce.

Question 2

Why are x1 and x2 limited to 0 and 1?

Accepted Answer

The horizontal axis is time, and time only moves forward. CSS requires the x coordinate of each control point to stay within 0 to 1 so the curve always maps each instant to a single progress value. The y coordinates have no such limit, which is why this editor clamps x1 and x2 but lets y1 and y2 overshoot.

Question 3

What does cubic-bezier(0, 0, 1, 1) mean?

Accepted Answer

It is the linear timing-function: progress increases at a constant rate, so the animation moves at a steady speed from start to finish. Because both control points lie on the straight line between (0,0) and (1,1), the curve is a perfect diagonal.

Question 4

How do ease, ease-in, ease-out and ease-in-out differ?

Accepted Answer

ease = cubic-bezier(0.25, 0.1, 0.25, 1) starts fairly quickly then slows. ease-in = cubic-bezier(0.42, 0, 1, 1) starts slowly and accelerates. ease-out = cubic-bezier(0, 0, 0.58, 1) starts fast and decelerates. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1) is slow at both ends and fast in the middle.

Question 5

Can the y values go above 1 or below 0?

Accepted Answer

Yes. When y1 or y2 sits outside the 0 to 1 range the curve overshoots its endpoints, producing anticipation (dipping below 0 first) or a bounce-back (rising above 1). These are the so-called back curves, such as cubic-bezier(0.34, 1.56, 0.64, 1), and are great for playful, springy UI motion.

Cubic BezierGenerator

Cubic Bezier
Generator