animation-timing-function

< css‎ | properties
Jump to: navigation, search

animation-timing-function

This article is Almost Ready.


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


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
prefix
?
Unknown
10
Yes
12
prefix
12.10
Yes
4.0
prefix

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
prefix
5.0
prefix
16.0
Yes
?
Unknown
?
Unknown
?
Unknown


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

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