This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.



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

Overview table

Initial value
Applies to
all elements, ::before and ::after pseudo-elements
Computed value
As specified.
CSS Object Model Property


  • 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)


Default. The animation begins and ends gradually; this value is equivalent to cubic-bezier(0.25,0.1,0.25,1).
The animation begins and progresses at a constant rate over the specified duration; this value is equivalent to cubic-bezier(0,0,1,1)
The animation begins gradually and progresses at a steady rate; this value is equivalent to cubic-bezier(0.42,0,1,1).
The animation begins at a steady rate then gradually ends; this value is equivalent to cubic-bezier(0,0,0.58,1).
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.
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.
Equivalent to steps(1,start).
Equivalent to steps(1,end).


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


 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

See also

Other articles

External resources