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 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>)
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()
andframes()
. steps(<integer>[, [ start | end ] ]?)
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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | 48 (48)[1] | No support | (Yes) | No support |
frames() |
(Yes) | 55 (55) | No support | (Yes) | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | 48.0 (48)[1] | No support | No support | No support |
frames() |
? | ? | ? | 55.0 (55) | No support | No support | No support |
[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled
to true
, and can disable it in any Firefox version by setting this preference to false
.
See also
- Web Animations API
AnimationEffectReadOnly.timing
returns aAnimationEffectTimingReadOnly
object...- ...while
AnimationEffect.timing
returns a mutableAnimationEffectTiming
object. - CSS's
animation-timing-function
andtransition-timing-function