CSS transition-timing-function Property
The transition-time-function CSS property specifies how a transition will look during its duration. This allows the transition to change its speed and other movement properties as it progresses.
The transition-timing-function specifies how long it takes the animation to transition from one set of CSS transitions to another. The transition-timing-function is set to smooth' by default. This value causes the animation to begin slowly, then speed up after the duration, and then slow down again before ending.
Syntax
Property Values
| Value | Description |
|---|---|
| ease | The default value. Specifies a transition effect with a slow start, fast transition, and slow end (equivalent to cubic-bezier(0.25,0.1,0.25,1)). |
| linear | Specifies a transition effect that moves at the same speed from beginning to end (equivalent to cubic-bezier(0,0,1,1)). |
| ease-in | A transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) is specified. |
| ease-out | A transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) is specified. |
| ease-in-out | A transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) is specified. |
| step-start | Steps equivalent (1, start) |
| step-end | Steps equivalent (1, end) |
| steps(int,start|end) | A stepping function with two parameters is specified. The function's first parameter specifies the number of intervals. It has to be a positive number (greater than 0). The second parameter, which is optional, has the value "start" or "end" and specifies the point in the interval where the values change. If the second parameter is omitted, the value "end" is assigned to it. |
| cubic-bezier(n,n,n,n) | In the cubic-bezier function, you can define your own values. Numeric values ranging from 0 to 1 are possible. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| transition-timing-function |
26.0
4.0 -webkit- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
10.0 |
12.1
10.5 -o- |