CSS property: -webkit-animation-timing-function
Description
Defines how an animation progresses between keyframes.
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.
See "Visual Effects Timing Functions"
for additional information about timing functions.
This property applies between keyframes, not over the entire animation.
For example, for an ease-in-out
timing function, an animation eases
in at the start of the keyframe and eases out at the end of the keyframe.
A -webkit-animation-timing-function defined within a keyframe block
applies to that keyframe; otherwise, the timing function specified for the animation is used.
Syntax
-webkit-animation-timing-function: <function> [, …];
Values
- <function>
The function to apply between keyframes.
ease 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)
.