animation-timing-function

Sets how the animation will progress over one cycle

Syntax

{ animation-timing-function:sVar }

Possible values

sVar

A variant that specifies one of the following values:

ease

linear

ease-in

ease-out

ease-in-out

cubic-bezier

This property has a default value of auto. It is not inherited.

Remarks

For a keyframe animation, the animation-timing-function applies between keyframes, not over the entire animation. For example, in the case of an ease-in-out timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. An animation-timing-function defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.

Standards information

Important

This documentation is preliminary and subject to change.

See also

Concepts

animation
animation-delay
animation-direction
animation-duration
animation-iteration-count
animation-name

Other resources

animation-play-state

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.