Fandom

HTML & CSS Wiki

-webkit-animation-timing-function

649pages on
this wiki
Add New Page
Comments0 Share

The CSS -webkit-animation-timing-function Apple extension property 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 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.

Values

Value Description
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).

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.