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.




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-
4.0 -moz-
3.1 -webkit-
10.0 12.1
10.5 -o-