animation-timing-function

Jump to: navigation, search

animation-timing-function


W3C Working Draft

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

Syntax

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


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

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

CSS

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)   ; }
}

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

Specification Status Related Changes
CSS Animations Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Internet Explorer 10.0 The -ms- prefix property is deprecated and should not be used.

See also

Other articles

External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article