AnimationEffectTimingReadOnly.easing

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The easing property of the AnimationEffectTimingReadOnly object represents the timing function used to scale the time to produce easing effects. Easing is the rate of the animation's change over time.

Note: In AnimationEffectTiming, a mutable subclass of AnimationEffectTimingReadOnly used withKeyframeEffects, the property acts as both a getter and a setter.

Syntax

// Getting the easing of the animation
var animationEasing = animation.effect.timing.easing;

// Setting the easing of the animation
animation.effect.timing.direction = "linear";

Value

A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined DOMString values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear. Available values include:

linear
A constant rate of change, neither accelerating nor deccelerating. 
cubic-bezier(<number>, <number>, <number>, <number>)
A diagram showing the points of a cubic bezier timing function.
Specifies a cubic Bézier timing function. The four numbers 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.
ease
A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
ease-in
An accelerated rate of change, going from slow to fast. Equivalent to cubic-bezier(0.42, 0, 1, 1).
ease-out
Another decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0, 0, 0.58, 1).
ease-in-out
This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
frames(<integer>)
Specifies a frames timing function, which breaks the animation down into a number of equal time intervals but also displays the start (0%) and end (100%) states for an equal amount of time to the other intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. See GitHub for a simple example that illustrates the difference between steps() and frames().
steps(<integer>[, [ start | end ] ]?)
A diagram of the various steps timing functions.
Specifies a step timing function, which breaks the animation down into a number of equal time intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, 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

In the Red Queen's Race example, we can inspect the Red Queen and Alice's animation to discover the secret to their sprite animation:

// Returns "steps(7, end)"
return redQueen_alice.effect.timing.easing;

Specifications

Specification Status Comment
Web Animations
The definition of 'AnimationEffectTimingReadOnly.easing' in that specification.
Working Draft Editor's draft.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?481 2 No Yes No
frames Yes ?55 No Yes No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ?481 2 No No ?
frames ? ? ?55 No No ?

1. The preference is set to true by default on Firefox Nightly and on Firefox Developer Edition, but not on the official release.

2. From version 48: this feature is behind the dom.animations-api.core-enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

Contributors to this page: fscholz, rachelnabors, chrisdavidmills
Last updated by: fscholz,