What do the four numbers mean?

They are the x and y coordinates of two control points, x1 y1 x2 y2. x stays between 0 and 1 (time); y can go outside that range for overshoot.

How do I use the value?

Put it in transition-timing-function or animation-timing-function, for example transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);.

Yes. Push a y value above 1 or below 0 to make the animation overshoot and settle, which reads as a bounce.

CSS & Design

Design a cubic-bezier easing curve with a live preview and copy the CSS.

Free foreverRuns in your browserNo sign-up

x1: 0.25

y1: 0.1

x2: 0.25

y2: 1

Live demo

cubic-bezier(0.25, 0.1, 0.25, 1)

Drag the sliders to shape the easing curve; y values can go below 0 or above 1 for a bounce or overshoot.

CSS transitions and animations use an easing function to control how motion accelerates. cubic-bezier() gives you full control over that curve.

This editor lets you shape the curve with sliders or presets, shows the curve and a live motion demo, and hands you the exact cubic-bezier() value.

The y control points can go beyond 0 to 1 to create a bounce or overshoot.

Ease preset

Output: cubic-bezier(0.25, 0.1, 0.25, 1)

The default ease curve starts and ends gently for natural motion.

What do the four numbers mean?: They are the x and y coordinates of two control points, x1 y1 x2 y2. x stays between 0 and 1 (time); y can go outside that range for overshoot.
How do I use the value?: Put it in transition-timing-function or animation-timing-function, for example transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);.
Can I make a bounce?: Yes. Push a y value above 1 or below 0 to make the animation overshoot and settle, which reads as a bounce.