KeyframeEffectOptions - 用于描述动画效果的定时属性

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

简而言之，这些属性描述了 用户代理 应该如何进行从关键帧到关键帧的过渡，以及动画开始和结束时的行为方式。

属性

composite 可选

确定如何在此动画与其他未指定其自身特定合成操作的单独动画之间组合值。默认为 replace 。

  • add 指示加性效应，其中每个连续的迭代都建立在最后一个迭代之上。例如，使用 transform 时，translateX(-200px) 不会覆盖更早的 rotate(20deg) 值，结果是 translateX(-200px) rotate(20deg)。
  • accumulate 和 add 相似但更聪明：blur(2) 和 blur(5) 将变为blur(7)，而不是 blur(2) blur(5)。
  • replace 用新值覆盖以前的值。

iterationComposite 可选

确定此动画中如何在迭代之间建立值。可以设置为 accumulate 或 replace（参见上文）。默认为 accumulate。

pseudoElement 可选

要定位的伪元素的选择器（如果有）。默认为 null。

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 Level 2
KeyframeEffectOptions 的定义		 草稿 添加了 iterationComposite 选项。
Web Animations
KeyframeEffectOptions 的定义		 工作草案 初始定义。

桌面浏览器兼容性

暂无兼容数据

相关链接