CSS transition-timing-function
The transition-timing-function property in CSS is used to specify the speed curve of the transition effect when changing the CSS properties of an element. This property controls how the intermediate values of the CSS properties are calculated during the transition period.
There are several predefined timing functions that you can use, or you can create your own custom timing function using the cubic-bezier function.
Predefined timing functions:
There are several predefined timing functions that you can use with the transition-timing-function property:
| Timing function | Description |
|---|---|
| ease | Default timing function. Starts slow, then fast, then ends slow. |
| linear | Constant speed throughout the transition. |
| ease-in | Starts slow and ends fast. |
| ease-out | Starts fast and ends slow. |
| ease-in-out | Starts slow, fast in the middle, ends slow. |
Custom timing function:
You can also create your own custom timing function using the cubic-bezier function. The cubic-bezier function takes four values as arguments - x1, y1, x2, y2. These values define the curve of the timing function.
For example, if you wanted a custom timing function where the animation starts slow, speeds up in the middle, and then slows down at the end, you could use the following cubic-bezier function:
cubic-bezier(0.42, 0, 0.58, 1);Example:
In this example, the red square will transition its width over 2 seconds using the ease timing function.
Experiment with different timing functions and see how they affect the transition effects on your elements!