animation-timing-function

Summary

Describes how the animation will progress over one cycle of its duration.

Overview table

Initial value: ease
Applies to: all elements, ::before and ::after pseudo-elements
Inherited: No
Media: visual
Computed value: As specified.
Animatable: No
CSS Object Model Property: animationTimingFunction
Percentages: N/A

Syntax

animation-timing-function: cubic-bezier(0,0,1,1)
animation-timing-function: ease
animation-timing-function: ease-in
animation-timing-function: ease-in-out
animation-timing-function: ease-out
animation-timing-function: linear
animation-timing-function: step-end
animation-timing-function: step-start
animation-timing-function: steps(3, end)

Values

ease: Default. The animation begins and ends gradually; this value is equivalent to cubic-bezier(0.25,0.1,0.25,1).
linear: The animation begins and progresses at a constant rate over the specified duration; this value is equivalent to cubic-bezier(0,0,1,1)
ease-in: The animation begins gradually and progresses at a steady rate; this value is equivalent to cubic-bezier(0.42,0,1,1).
ease-out: The animation begins at a steady rate then gradually ends; this value is equivalent to cubic-bezier(0,0,0.58,1).
ease-in-out: The animation begins and ends gradually; equivalent to cubic-bezier(0.42,0,0.58,1). Note that this timing function is similar to ease, although the latter starts faster than it ends.
cubic-bezier(0,0,1,1): Specifies a cubic bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range. This function is used to specify custom timing functions.
steps(3, end): Specifies a stepping function using two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0. The second optional is either the value start or end and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end.
step-start: Equivalent to steps(1,start).
step-end: Equivalent to steps(1,end).

Examples

A fast-moving sequence uses linear timing to highlight an abrupt transition within the keyframes, from a moving to a stopped state:

div {
    animation-duration        : 0.5s;
    animation-fill-mode       : both;
    animation-iteration-count : 1;
    animation-name            : fastSlide;
    animation-timing-function : linear;
    transform-origin          : bottom;
}
@keyframes fastSlide {
    0%   { transform: translate(120%) skewX(-30deg) ; }
    70%  { transform: translate(0%)   skewX(-30deg) ; }
    80%  { transform: translate(0%)   skewX(20deg)  ; }
    95%  { transform: translate(0%)   skewX(-10deg) ; }
    100% { transform: translate(0%)   skewX(0deg)   ; }
}

View live example

Usage

 The timing functions supported by animation-timing-function are defined by transition-timing-function.

If animation-timing-function specifies more timing functions than there are values in animation-name, the excess functions are ignored. If animation-timing-function specifies fewer durations than there are values in animation-name, the list of functions is repeated as many times as necessary to ensure each animation has a duration.

For a keyframed 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.

Related specifications

CSS Animations: Working Draft

Attributions

Mozilla Developer Network .
Microsoft Developer Network: Windows Internet Explorer API reference Article