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

The EffectTiming dictionary's easing property in the Web Animations API specifies the timing function used to scale the time to produce easing effects, where easing is the rate of the animation's change over time.

Element.animate(), KeyframeEffectReadOnly(), and KeyframeEffect() all accept an object of timing properties including easing. The value of easing corresponds directly to AnimationEffectTimingReadOnly.easing in timing objects returned by AnimationEffectReadOnly, KeyframeEffectReadOnly, and KeyframeEffect.


var timingProperties = {
  easing: single-transition-timing-function

timingProperties.easing = single-transition-timing-function


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:

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.
A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
An accelerated rate of change, going from slow to fast. Equivalent to cubic-bezier(0.42, 0, 1, 1).
Another decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0, 0, 0.58, 1).
This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
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.
Equivalent to steps(1, start)
Equivalent to steps(1, end).


In the Red Queen's Race example, we animate Alice and the Red Queen by passing an easing of steps(7, end) to animate():

// Define the key frames
var spriteFrames = [
  { transform: 'translateY(0)' },
  { transform: 'translateY(-100%)' }   

// Get the element that represents Alice and the Red Queen
var redQueen_alice_sprite = document.getElementById('red-queen_and_alice_sprite');

// Animate Alice and the Red Queen using steps()
var redQueen_alice = redQueen_alice_sprite.animate(
spriteFrames, {
  easing: 'steps(7, end)',
  direction: "reverse",
  duration: 600,
  playbackRate: 1,
  iterations: Infinity


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

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Chrome Full support YesEdge Full support ≤79Firefox Full support 63IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 63Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
jump- keywords for steps()Chrome Full support 77Edge Full support ≤79Firefox Full support 65IE No support NoOpera No support NoSafari No support NoWebView Android Full support 77Chrome Android Full support 77Firefox Android Full support 65Opera Android Full support 55Safari iOS No support NoSamsung Internet Android Full support 12.0


Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also