EffectTiming - 用于描述动画效果的计时属性

EffectTiming 字典是 Web 动画 API 的一部分，由 Element.animate()，KeyframeEffectReadOnly() 和 KeyframeEffect() 用于描述动画效果的计时属性。这些属性都是可选的，但是如果没有设置 duration，动画将无法播放。

简而言之，这些属性描述了 user agent 应该如何从关键帧转换到关键帧，以及如何在动画开始和结束时表现。

属性

delay 可选

延迟动画开始的毫秒数。默认为 0。

direction 可选

表示动画是向前运行（normal），向后运行（reverse），在每次迭代后切换方向（alternate），还是向后运行并在每次迭代后切换方向（alternate-reverse）。默认为 "normal"。

duration 可选

每次迭代动画完成所需的毫秒数。默认为 0. 虽然它在技术上是可选的，但请记住，如果该值为 0，则不会运行动画。

easing 可选

动画的变化率随着时间的推移而变化。接受预定义的值 "linear"，"ease"，"ease-in"，"ease-out" 和 "ease-in-out"，或者自定义的 "cubic-bezier" 值，例如 "cubic-bezier(0.42, 0, 0.58, 1)"。默认值为 "linear"。

endDelay 可选

动画结束后延迟的毫秒数。这主要用于根据另一个动画的结束时间对动画进行排序。默认为 0。

fill 可选

决定动画的效果是否应该在播放之前由元素反映（"backwards"），或者是在动画完成播放后保留（"forwards"）或 both。默认为 "none"。

iterationStart 可选

描述动画应该在迭代中的哪个点开始。例如，0.5 表示在第一次迭代的中途开始，具有 2 次迭代的动画将在第三次迭代的中途结束。默认为 0.0。

iterations 可选

动画重复的次数。默认为 1，还可以使用值 Infinity，表示只要元素存在时就一直重复。

规范

规范	状态	备注
Web Animations EffectTiming 的定义	工作草案	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• Web Animations API
• 使用 Web 动画 API
• Element.animate()
• KeyframeEffect()
• KeyframeEffectReadOnly()