Drag the handles

P1 (0.25, 0.1)P2 (0.25, 1)

Preview

Duration1.2s

cubic-bezier()

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

Full CSS

.element {
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

What the two points control

A CSS cubic-bezier curve is defined by two control points, P1 and P2, anchored between a fixed start at (0, 0) and end at (1, 1). The x-axis is time, always clamped between 0 and 1. The y-axis is the animated property's progress, and it is allowed to go below 0 or above 1, which is what produces overshoot and anticipation effects like ease-out-back.

Reading the shape

A steep early slope means the animation starts fast and settles slowly, that's ease-out. A flat start with a steep finish is ease-in, the animation ramps up right before it ends. Pull a handle above y = 1 or below y = 0 and the element will overshoot its target before settling, useful for elements that should feel like they have physical weight.

Where to use it

Apply the curve to a transition or animation property. Transform and opacity changes are the safest properties to animate, they run on the compositor and won't trigger layout or paint on every frame. Avoid easing properties like width or top for anything performance-sensitive.