YouTip

## CSS cubic-bezier() Function The `cubic-bezier()` function in CSS defines a Cubic Bézier curve. These curves are used to customize transition and animation speed curves, allowing you to create highly specific, custom easing effects. --- ## Definition and Usage A Cubic Bézier curve is defined by four points: **P0, P1, P2, and P3**. * **P0** and **P3** represent the start and end of the curve. * **P0** is fixed at `(0, 0)` and represents the initial time and initial state. * **P3** is fixed at `(1, 1)` and represents the final time and final state. ```text P0: Default value (0, 0) P1: Dynamic coordinate (x1, y1) P2: Dynamic coordinate (x2, y2) P3: Default value (1, 1) ``` To customize the curve, you define the coordinates for the control points **P1** and **P2**: `cubic-bezier(x1, y1, x2, y2)`. ### Key Rules for Coordinates: * **X-axis values (`x1` and `x2`)**: Must be between `0` and `1` (inclusive). If a value falls outside this range, the `cubic-bezier()` function becomes invalid. * **Y-axis values (`y1` and `y2`)**: Can be any real number. They are not restricted to the `[0, 1]` range, allowing you to create "bounce" or elastic effects by going below `0` or above `1`. Conceptually, imagine a straight line drawn from `(0,0)` to `(1,1)`. By pulling this line using two control points (**P1** and **P2**), you shape the curve. The resulting curve dictates the acceleration and deceleration of your animation or transition. The `cubic-bezier()` function can be used with the following CSS properties: * `transition-timing-function` * `animation-timing-function` **CSS Version:** CSS3 --- ## CSS Syntax ```css cubic-bezier(x1, y1, x2, y2) ``` ### Parameter Values | Value | Description | | :--- | :--- | | *x1, y1, x2, y2* | **Required.** Numeric values. `x1` and `x2` must be numbers between `0` and `1` (inclusive). `y1` and `y2` can be any real number. | --- ## Code Examples ### Example 1: Basic Transition with cubic-bezier() This example applies a custom transition speed curve to a `div` element when its width changes. ```css div { width: 100px; height: 100px; background: red; transition: width 2s; /* Custom easing curve */ transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } ``` ### Example 2: Equivalent Standard Easing Functions Many of the built-in CSS easing keywords are shorthand aliases for specific `cubic-bezier()` curves: ```css /* Equivalent to: cubic-bezier(0.25, 0.1, 0.25, 1.0) */ transition-timing-function: ease; /* Equivalent to: cubic-bezier(0.42, 0.0, 1.0, 1.0) */ transition-timing-function: ease-in; /* Equivalent to: cubic-bezier(0.0, 0.0, 0.58, 1.0) */ transition-timing-function: ease-out; /* Equivalent to: cubic-bezier(0.42, 0.0, 0.58, 1.0) */ transition-timing-function: ease-in-out; /* Equivalent to: cubic-bezier(0.0, 0.0, 1.0, 1.0) */ transition-timing-function: linear; ``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports this function. | Function | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **cubic-bezier()** | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 | --- ## Important Considerations 1. **Bouncing Effects:** By setting `y1` or `y2` to values greater than `1` or less than `0`, you can create animations that overshoot their target values and bounce back. For example, `cubic-bezier(0.68, -0.6, 0.32, 1.6)` creates a dramatic elastic effect. 2. **Performance:** Cubic Bézier transitions are hardware-accelerated on modern browsers when applied to properties like `transform` and `opacity`. 3. **Debugging Tools:** Most modern browser developer tools (such as Chrome DevTools or Firefox Developer Tools) include an interactive visual Bézier curve editor. You can click the curve icon next to the CSS property to drag and preview your custom curves in real time.