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.
Note: Element.animate()
, KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, and KeyframeEffect.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
.
Syntax
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()
:
// 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 |
See also
- Web Animations API
Element.animate()
,KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, andKeyframeEffect.KeyframeEffect()
all accept an object of timing properties including this one.- The value of this property corresponds to the one in
AnimationEffectTimingReadOnly
(which is thetiming
object forAnimationEffectReadOnly
,KeyframeEffectReadOnly
, andKeyframeEffect
). - CSS's
animation-timing-function
andtransition-timing-function
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/animationeffecttimingproperties/easing