CSS cubic-bezier

In CSS, we can use the cubic-bezier function to create custom Bezier curve animations. This function accepts four parameters: the coordinates of three points and a time. By adjusting these parameters, we can create a variety of animation effects.

Bezier Curve

A Bezier curve is a mathematical concept used to describe a smooth, curved path. In CSS, we use Bezier curves to define animation easing effects.

A Bezier curve consists of at least two points: the starting point (P0) and the ending point (P3). In addition to the start and end points, we also need to define two control points (P1 and P2). These four points will determine the shape of the curve.

cubic-bezier Function

The

cubic-bezier function defines a cubic Bézier curve. It accepts four parameters, representing the coordinates of the three points and a time.

cubic-bezier(P1x, P1y, P2x, P2y) 

P1x and P1y represent the coordinates of control point P1, and P2x and P2y represent the coordinates of control point P2.

Parameter Value Range

The

cubic-bezier function accepts parameters ranging from 0 to 1. These parameters determine the positions of the two control points, thereby affecting the shape of the Bézier curve.

P1x and P2x determine the direction of the curve on the X-axis. Smaller values ​​tilt the curve to the left, while larger values ​​tilt it to the right.

P1y and P2y determine the direction of the curve on the Y-axis. Smaller values ​​tilt the curve downward, while larger values ​​tilt it upward.

By adjusting these parameters appropriately, we can achieve different animation effects, such as an animation that starts slowly and ends quickly, or an animation that starts quickly and ends slowly.

Sample Code

Below is a sample code that demonstrates how to use the cubic-bezier function to create a custom animation effect.

/* Define a button style */ 
.button {
width: 200px;
height: 50px;
background-color: #f00;
transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
} 

/* Change the button's background color when the mouse hovers */ 
.button:hover {
background-color: #00f;
} 

In the above code, we add a background color transition animation to the button. When the mouse hovers over the button, the button’s background color smoothly transitions from red to blue.

In the transition attribute, we use the cubic-bezier function to define a custom Bezier curve. This Bezier curve has four parameters (0.68, -0.55, 0.27, 1.55). By adjusting these parameters, we can achieve different animation effects.

Summary

In CSS, the cubic-bezier function allows us to create custom Bezier curve animations. By adjusting the parameters of the Bezier curve, we can achieve a variety of different animation effects. By using cubic-bezier appropriately, we can make our web pages more rich and vivid.