Easing

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The `easing` property of the Web Animations API represents the timing function used to scale the time to produce easing effects. Easing is the rate of the animation's change over time.

Syntax

JavaScript
```var timingProperties = {
easing: "ease-in"
}```

Value

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

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)`.
steps(<integer>[, [ start | end ] ]?)

Specifies a step timing function. 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 animate Alice and the Red Queen by passing an easing `of steps(7, end)` to `animate()`:

JavaScript
```// 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
});```

Specifications

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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 48 (48) No support (Yes) No support
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? No support No support No support