在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

EffectTiming dictionary's easing property in the Web 动画 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() ，和 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 ，和 KeyframeEffect .

句法

var timingProperties = {
  easing: single-transition-timing-function
}
timingProperties.easing = single-transition-timing-function
					

值

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) 。默认为 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() and frames() .

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

相当于 steps(1, start)

step-end

相当于 steps(1, end) .

范例

在 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
});
					

规范

规范	状态	注释
Web 动画 The definition of 'easing' in that specification.	工作草案	编者草案。

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
easing	Chrome 52	Edge ≤79	Firefox 63	IE No	Opera Yes	Safari No	WebView Android 52	Chrome Android 52	Firefox Android 63	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
jump- keywords for steps()	Chrome 52	Edge ≤79	Firefox 65	IE No	Opera No	Safari No	WebView Android 52	Chrome Android 52	Firefox Android 65	Opera Android 55	Safari iOS No	Samsung Internet Android 12.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

另请参阅

• Web 动画 API
• Element.animate() , KeyframeEffect() ，和 AnimationEffect.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 from AnimationEffect.getTiming() and AnimationEffect.getComputedTiming() ).
• CSS's animation-timing-function and transition-timing-function .

元数据

• 最后修改： Mar 18, 2019

相关话题

1. Web 动画 API
2. EffectTiming
3. 特性

   1. delay
   2. direction
   3. duration
   4. easing
   5. endDelay
   6. fill
   7. iterations
   8. iterationStart
4. Web 动画相关页面

   1. 动画
   2. AnimationEffect
   3. AnimationEvent
   4. AnimationPlaybackEvent
   5. AnimationTimeline
   6. Document.getAnimations()
   7. Document.timeline
   8. DocumentTimeline
   9. Element.animate()
   10. KeyframeEffect