CSS transition-timing-function property specifies the speed curve of a transition, which describes how the transition will proceed over one cycle of its duration. This curve is defined using an inbuilt function called the timing function.
For example, a linear timing function specifies that the speed of the transition will remain constant over its once cycle of duration. While an ease function specifies that the speed of the transition will grow slowly at starting, then fast, and then slow again at the end.
Hover over the elements below to see the transition effect.
Try out the example below for a clear understanding:
Example:
.div1{
transition-timing-function: linear;
transition-property: width;
}
.div2{
transition-timing-function: steps(6, end);
transition-property: width;
}
CSS Syntax
The transition-timing-function property has the following syntax:
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|steps(n,start|end)|step-start|step-end|cubic-bezier(n,n,n,n)|initial|inherit;
Property Values
The transition-timing-function property accepts several inbuilt timing functions as a value. These timing functions are listed below:
| ease | This is the default value. It specifies that the transition will start slowly, then fast, and then again slow at the end. Same as cubic-bezier(0.25, 0.1, 0.25, 1.0) |
| ease-in | Specifies that the speed of transition will be slow at starting and will gradually increase until the end. It is same as cubic-bezier(0.42, 0, 1.0, 1.0) |
| ease-out | Specifies that the transition will start quickly and will keep on slowing down until it completes. It is same as cubic-bezier(0, 0, 0.58, 1.0) |
| ease-in-out | Specifies that the transition has a slow start, then fast, and then slow again until completes. It is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0) |
| linear | Specifies that the speed of the transition will be constant during the entire cycle of the transition. It is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0) |
| steps(n,start|end) | It accepts two parameters, first, the number of total steps in one cycle. The second parameter is optional. It specifies the point at which the change of values occurs within the interval. If it is omitted, it sets to “end”. |
| step-start | Same as steps(1, start). |
| step-end | Same as steps(1, end). |
| cubic-bezier(n,n,n,n) | This function lets you define any timing function you want. It accepts four values each in the range of 0 to 1. For example, if you want to make a function same as ease ,you can use cubic-bezier(0.25, 0.1, 0.25, 1.0). |
| initial | Sets the transition-timing-function property to its default value(ease). |
| inherit | Inherits the transition-timing-function property from its parent element. |
General Info
| Default Value | ease |
| Inherited | No |
| JavaScript Usage | element.style.transitionTimingFunction= “steps(6,end)” |
