CSS cubic-bezier

The CSS cubic-bezier() function is used in CSS animations and transitions to define custom timing functions. It allows you to create smooth and customized acceleration and deceleration effects during the animation, giving you precise control over the pacing and easing of the animation.

The cubic-bezier() function takes four numeric values as parameters, each ranging from 0 to 1. These values represent two control points on a cubic Bézier curve, which defines the animation’s timing function. The Bézier curve starts at (0, 0) and ends at (1, 1).

The syntax for the cubic-bezier() function is as follows:

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

• x1: The x-coordinate of the first control point, ranging from 0 to 1.
• y1: The y-coordinate of the first control point, ranging from 0 to 1.
• x2: The x-coordinate of the second control point, ranging from 0 to 1.
• y2: The y-coordinate of the second control point, ranging from 0 to 1.

The function returns a timing function that corresponds to the specified Bézier curve.

Example:

/* Custom timing function with cubic-bezier */
.element {
  animation-name: slideIn;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

In this example, the cubic-bezier(0.42, 0, 0.58, 1) timing function is applied to the animation named slideIn. The animation moves an element from left to right (translateX) and is defined to have a custom easing effect, which creates a subtle bounce effect at the end of the animation.

The cubic-bezier() function is a powerful tool for creating smooth and sophisticated animations with a custom feel. By adjusting the values of the control points, you can create various easing effects to match your design requirements and improve the overall user experience. However, finding the right values for the Bézier curve can require some trial and error, and there are also other predefined keywords like ease, ease-in, ease-out, and ease-in-out that offer standard easing options for simpler use cases.