← Back to functions

CSS Function

cubic-bezier()

Animation

Defines a custom easing curve for CSS transitions and animations.

Syntax

cubic-bezier(x1, y1, x2, y2)

Example

transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

Common use cases

  • Spring-like bounce animations
  • Custom easing beyond ease-in and ease-out
  • Brand-specific motion design

Practical developer insight

Use cubic-bezier.com to visually design your curve. Values above 1 or below 0 on the Y axis create overshoot effects like a spring bounce.

Related

transitiontransform