CSS property: -webkit-transition-timing-function


Specifies how the intermediate values used during a transition are calculated.

This property allows for a transition to change speed over its duration. These effects, commonly called easing functions, are mathematical functions that produce a smooth curve.

The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier function to specify your own points. See cubic-bezier for a description of the parameters for this function.

The timing function takes as its input the current elapsed percentage of the transition duration and outputs a percentage that determines how close the transition is to its goal state.


-webkit-transition-timing-function: <timing_function> [, ...];



The timing function.

ease (by default)Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
linearEquivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-inEquivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
ease-outEquivalent to cubic-bezier(0, 0, 0.58, 1.0)
ease-in-outEquivalent to cubic-bezier(0.42, 0, 0.58, 1.0)