CSS property: -webkit-transition-timing-function
Description
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.
Syntax
-webkit-transition-timing-function: <timing_function> [, ...];
Values
- <timing_function>
The timing function.
ease (by default) Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)linear Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)ease-in Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)ease-out Equivalent to cubic-bezier(0, 0, 0.58, 1.0)ease-in-out Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)