AnimationEffectTimingReadOnly.easing

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.

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

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

Browser compatibility

See also

• Web Animations API
• AnimationEffectReadOnly.timing returns a AnimationEffectTimingReadOnly object...
• ...while AnimationEffect.timing returns a mutable AnimationEffectTiming object.
• CSS's animation-timing-function and transition-timing-function