How to understand Cubic Bezier animation curves?
Cubic Bezier uses a starting point, two control points, and an end point to describe the progress of the animation. CSS fixed starting point is (0,0) and end point is (1,1), you only need to adjust P1 and P2. The x-axis represents the elapsed time, and the y-axis represents the proportion of the property completed; the steeper the curve, the faster the stage moves.
x1 and x2 must be between 0 and 1, because time cannot go back; the y value can be outside the range, allowing the element to briefly exceed the end point or move in the opposite direction first. This type of effect is expressive, but should be avoided for forms or navigation actions that require precise predictions.
Principles for choosing easing
- Ease-out is commonly used when elements enter the scene, responding quickly and then stopping softly.
- You can use ease-in to leave the element, first slowly and then quickly.
- Continuous rotation or progress indicators are suitable for linear.
- Interface state transitions can use ease-in-out, which starts and ends more naturally.
Frequently Asked Questions
What do the four numbers represent?
The order is x1, y1, x2, y2, which is the coordinates of the two control points.
Why can't control point x go beyond 0 to 1?
x represents time. To ensure that a single time only corresponds to a single progress, CSS limits the range of x1 and x2.
What happens if the y value is out of range?
Animated properties may be above the end point or below the start point, creating overshoot and anticipation.
What is the difference between ease and ease-in-out?
The default ease starts at a more aggressive speed; ease-in-out starts and ends slowly and is faster in the middle.
Can all CSS properties be easing?
Only animatable properties can be smoothly interpolated; discrete properties such as display generally do not have the same effect.