Default value for CSS transition-timing-function property is ease.
Property Value
The following table provides a list of values for CSS transition-timing-function property.
Value
Explanation
linear
Specifies that the transition has the same speed from start to end. It is equal to cubic-bezier(0.0, 0.0, 1.0, 1.0).
ease
Specifies that the transition has a slow start, then fast, before it ends slowly. It is equal to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in
Specifies that the transition starts off slowly, with the speed of the transition will increase until complete. It is equal to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out
Specifies that the transition starts quickly, slowing down the transition continues. It is equal to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out
Specifies a transition effect with a slow start and end. It is equal to cubic-bezier(0.42, 0, 0.58, 1.0).
steps(n, <option>)
Specifies that the transition iteration along n stops along the transition, displaying each stop for equal lengths of time. Possible values for option are:
jump-start: Specifies a left-continuous function, so that the first jump happens when the transition begins.
jump-end: Specifies a right-continuous function, so that the last jump happens when the transition ends.
jump-none: Specifies that there is no jump on either end.
jump-both: Specifies that it includes pauses at both the 0% and 100% marks, effectively adding a step during the transition iteration.
start: Same as jump-start.
end: Same as jump-end.
cubic-bezier(n,n,n,n)
Specifies your own values in the cubic-bezier function Possible values are numeric values from 0 to 1.
Using JavaScript
In the following example, we will demonstrate how to change the CSS transition-timing-function property of an element using JavaScript.