关键帧格式

语法

有两种不同的关键帧格式

1. 一个包含要迭代的属性和值的

   对象（关键帧）的数组。这是 getKeyframes() 方法返回的规范格式。

   js

   element.animate(
     [
       {
         // from
         opacity: 0,
         color: "white",
       },
       {
         // to
         opacity: 1,
         color: "black",
       },
     ],
     2000,
   );
   

   可以通过提供 offset 值来指定每个关键帧的偏移量。

   js

   element.animate(
     [{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
     2000,
   );
   

   注意： 如果提供了 offset 值，则必须介于 0.0 和 1.0 之间（包括两端），并按升序排列。

   不一定需要为每个关键帧指定偏移量。未指定偏移量的关键帧将在相邻关键帧之间均匀分布。

   可以通过提供 easing 值来指定应用于关键帧之间的缓动效果，如下例所示。

   js

   element.animate(
     [
       { opacity: 1, easing: "ease-out" },
       { opacity: 0.1, easing: "ease-in" },
       { opacity: 0 },
     ],
     2000,
   );
   

   在此示例中，指定的缓动效果仅从指定缓动效果的关键帧一直应用到下一个关键帧。然而，在 options 参数上指定的任何 easing 值都会应用于动画的单次迭代 — 整个持续时间。

2. 一个包含键值对的对象，其中键是要设置动画的属性，值是要迭代的值的数组。

   js

   element.animate(
     {
       opacity: [0, 1], // [ from, to ]
       color: ["white", "black"], // [ from, to ]
     },
     2000,
   );
   

   使用此格式时，每个数组中的元素数量不必相等。提供的值将独立地进行间隔。

   js

   element.animate(
     {
       opacity: [0, 1], // offset: 0, 1
       backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
     },
     2000,
   );
   

   特殊的键 offset、easing 和 composite（如下所述）可以与属性值一起指定。

   js

   element.animate(
     {
       opacity: [0, 0.9, 1],
       offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
       easing: ["ease-in", "ease-out"],
     },
     2000,
   );
   

   在根据属性值列表生成一组合适关键帧后，将每个提供的偏移量应用于相应的关键帧。如果值不足，或者列表中包含 null 值，则未指定偏移量的关键帧将像上面描述的数组格式一样均匀分布。

   如果 easing 或 composite 值太少，则会根据需要重复相应的列表。

隐式到/从关键帧

浏览器可以通过使用当前状态来推断动画的开始或结束状态。默认情况下，如果只提供一个关键帧，它将被视为结束状态，开始状态将从元素的当前计算样式推断。但是，您可以指定 offset 来指示提供的关键帧在动画时间线中的位置。有关更多信息，请参阅 Element.animate()。

// Animate from the current state to translateX(300px)
logo.animate({ transform: "translateX(300px)" }, 1000);
// Animate from translateX(300px) to the current state
logo.animate({ transform: "translateX(300px)", offset: 0 }, 1000);
// Animate from the current state to translateX(300px) and back to the current state
logo.animate({ transform: "translateX(300px)", offset: 0.5 }, 1000);

属性

关键帧指定要设置动画的 CSS 属性的属性-值对。属性名称使用 驼峰式命名法指定，因此例如 background-color 变为 backgroundColor，background-position-x 变为 backgroundPositionX。也允许使用简写值，例如 margin。

两个特殊的 CSS 属性是

• float，必须写成 cssFloat，因为 "float" 是 JavaScript 中的保留字。这里仅供参考，因为 "float" 不是可设置动画的 CSS 属性，所以不会对动画产生任何影响。
• offset，必须写成 cssOffset，因为 "offset" 代表如下所述的关键帧偏移量。

以下特殊属性也可以指定

offset

关键帧的偏移量，指定为 0.0 到 1.0（含）之间的数字或 null。这等同于在 CSS 样式表中使用 @keyframes 指定开始和结束状态的百分比。如果此值为 null 或缺失，则关键帧将在相邻关键帧之间均匀分布。

easing

从该关键帧到系列中的下一个关键帧使用的缓动函数。

composite

用于将此关键帧中指定的值与底层值合并的 KeyframeEffect.composite 操作。如果效果上指定的复合操作正在使用，则此值为 auto。

另见

• Web Animations API
• Element.animate()
• KeyframeEffect()
• KeyframeEffect.setKeyframes()