What is cubic-bezier in CSS: Smooth Animation Timing Explained

cubic-bezier in CSS is a function that defines a custom timing curve for animations and transitions. It controls how the animation speed changes over time by specifying four control points that shape the curve.

How It Works

Imagine you are driving a car and want to control how fast you speed up or slow down. The cubic-bezier function lets you do the same for animations in CSS by shaping their speed over time. Instead of moving at a constant speed, animations can start slow, speed up, then slow down again, making them feel natural and smooth.

The function uses four numbers between 0 and 1 that act like points on a graph. These points create a curve that defines the animation's progress from start (0) to finish (1). The curve controls how fast or slow the animation moves at each moment, similar to how a roller coaster speeds up and slows down along its track.

Example

This example shows a box that moves across the screen with a custom cubic-bezier timing. The animation starts slowly, speeds up in the middle, and slows down at the end.

css

div {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  position: relative;
  animation: move 3s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@keyframes move {
  from { left: 0; }
  to { left: 300px; }
}

Output

A green square moves smoothly from left to right over 3 seconds, starting slow, speeding up, then slowing before stopping.

When to Use

Use cubic-bezier when you want more control over how animations feel. It helps create natural, smooth movements instead of simple linear or preset easing. For example, you can make buttons feel more responsive, slides transition gently, or loading animations appear more dynamic.

It’s especially useful when default easing functions like ease-in or ease-out don’t match the style or mood you want. Custom curves let you tailor the timing to fit your design perfectly.

Key Points

• Four control points: cubic-bezier(x1, y1, x2, y2) define the curve shape.
• Range: values usually between 0 and 1 for smooth curves.
• Controls speed: changes how fast or slow animation progresses.
• Custom easing: create unique animation feels beyond presets.
• Works with: CSS transition-timing-function and animation-timing-function.

Key Takeaways

cubic-bezier defines custom animation speed curves using four control points.

It makes animations feel smooth and natural by controlling acceleration and deceleration.

Use it to customize timing beyond standard easing presets for better user experience.

Values range from 0 to 1 and shape the animation progress over time.

Works with CSS properties like transition-timing-function and animation-timing-function.