關鍵幀格式

語法

有兩種不同的關鍵幀格式

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()