To customize the cubic-bezier() timing function of CSS, 1. It is necessary to understand that its structure is cubic-bezier(x1, y1, x2, y2), the starting point (0,0), and the end point (1,1), the x value must be between 0 and 1, and y can exceed to achieve the bounce or fallback effect; 2. Common presets such as ease, ease-in, etc. are the abbreviation of built-in curves, but fine control needs to be defined manually; 3. Select the control point to observe the velocity changes corresponding to the steepness of the curve, and the Y axis is less than 0, and the X axis may regress beyond the range; 4. Pay attention to good compatibility when using it, the value cannot exceed the range, and the multi-attribute transition should be unified; 5. Example code. cubic-bezier(0.3, -0.5, 0.7, in transition-box 1.5) It can achieve the animation effect of popping up after pulling back, and is suitable for scenes such as click feedback.

To customize a CSS cubic-bezier() timing function, it is actually to use Bezier curves to control the speed change in animation or transition. You don’t need to write complex mathematical formulas, you just need to choose two control points to achieve a very flexible rhythm of motion.

Understand the basic structure of cubic-bezier()

cubic-bezier() receives four parameters: cubic-bezier(x1, y1, x2, y2) . These four values ??represent the two control points of the Bezier curve (P1 and P2), the starting point is (0, 0), and the end point is (1, 1).

• x1 and x2 must be between 0 and 1 (otherwise the browser ignores the function).
• y1 and y2 can exceed the range of 0~1 and are used to create a "bounce" or "rewind" effect.

For example, cubic-bezier(0.4, 0.0, 0.2, 1.0) is a common slow-in and fast-out curve.

You can understand it as the speed control of the start and end stages of the animation: the first half of the control of acceleration, and the second half of the control of deceleration.

The difference between common presets and customizations

CSS provides some built-in timing functions, such as:

• ease
• linear
• ease-in
• ease-out
• ease-in-out

These are actually shortcuts for cubic-bezier() . For example:

• ease ≈ cubic-bezier(0.25, 0.1, 0.25, 1.0)
• ease-in ≈ cubic-bezier(0.42, 0, 1.0, 1.0)

But if you want more refined controls, such as suddenly slowing down and accelerating in the middle of the animation, or having elastic effects, you must define the Bezier curve yourself.

How to choose the right control point?

The easiest way is to use online tools to help you generate curves:

• http://m.miracleart.cn/link/73fa61ad33d596ce3f642aa3a332e792
• http://m.miracleart.cn/link/ca5d8d0bc3e1a9613976fe2e4adf5649

The operation suggestions are as follows:

• Drag the control point to observe the curve shape
• The steeper the curve means the faster the speed
• If the curve falls down (Y axis is less than 0), a "surge" effect will appear
• If the curve exceeds the X-axis range, a backward animation may occur

You can start with existing common curves, such as cubic-bezier(.17,.67,.83,.67) is a smooth bounce effect, which is common in scrolling or button interactions.

Use scenarios and precautions

• Used for timing-function in transition or animation .
• It is supported by different browsers and has good compatibility.
• Do not write control point values ??randomly, as they will be invalid if they are out of range.
• When multiple attributes are transitioned at the same time, a timing function is more coordinated.

For example:

 .transition-box {
  transition: all 0.5s cubic-bezier(0.3, -0.5, 0.7, 1.5);
}

This curve will allow the element to "pull back" before starting and then pop up quickly, suitable for click feedback or emphasis animation.

Basically that's it. The key is to try a few more control points and feel the animation rhythm brought by different curves.

The above is the detailed content of How to create a custom timing function with cubic-bezier()?. For more information, please follow other related articles on the PHP Chinese website!