This is an experimental technologyCheck 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
.
Syntax
var timingProperties = { easing: single-transition-timing-function } timingProperties.easing = single-transition-timing-function
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>)
- [[File:../../../../../../www.w3.org/TR/css-easing-1/cubic-bezier-timing-curve.html|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.
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 [[../../../../../../../mdn.github.io/css-examples/animation-frames-timing-function/index-waa|simple example]] that illustrates the difference between
steps()
andframes()
. steps(<integer>[, [ start | end ] ]?)
- [[File:../../../../../../www.w3.org/TR/css-easing-1/step-timing-func-examples.html|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.
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 AnimationsThe definition of 'easing' in that specification. | Working Draft | Editor's draft. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 52 |
Edge
Full support ≤79 |
Firefox
Full support 63 |
IE
No support No |
Opera
Full support Yes |
Safari
No support No |
WebView Android
Full support 52 |
Chrome Android
Full support 52 |
Firefox Android
Full support 63 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support 6.0 |
jump- keywords for steps()
|
Chrome
Full support 52 |
Edge
Full support ≤79 |
Firefox
Full support 65 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
Full support 52 |
Chrome Android
Full support 52 |
Firefox Android
Full support 65 |
Opera Android
Full support 55 |
Safari iOS
No support No |
Samsung Internet Android
Full support 12.0 |
Legend
- 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
- Web Animations API
Element.animate()
,KeyframeEffect()
, andAnimationEffect.updateTiming()
all accept an object of timing properties including this one.- The value of this property corresponds to the one in
EffectTiming
(which is returned fromAnimationEffect.getTiming()
andAnimationEffect.getComputedTiming()
). - CSS's
animation-timing-function
andtransition-timing-function
.
EffectTiming.easing by Mozilla Contributors is licensed under CC-BY-SA 2.5.