@keyframes

語法

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

值

<custom-ident>

標識關鍵幀列表的名稱。這必須與 CSS 語法中的識別符號生成匹配。

from

起始偏移量為 0%。

改為

結束偏移量為 100%。

<percentage>

指定關鍵幀應發生時，動畫序列所經過時間的百分比。

<timeline-range-name> <percentage>

指定關鍵幀應發生時，指定 animation-range 所經過時間的百分比。有關使用命名時間線範圍的動畫型別，請參閱 CSS 滾動驅動動畫。

描述

要使用關鍵幀，請建立一個 @keyframes 規則，併為其指定一個名稱，然後透過 animation-name 屬性使用該名稱將動畫與其關鍵幀宣告匹配。每個 @keyframes 規則都包含一個關鍵幀選擇器樣式列表，這些選擇器指定關鍵幀發生時動畫的百分比，以及一個包含該關鍵幀樣式的塊。

您可以按任意順序羅列關鍵幀百分比；它們將按應發生的順序進行處理。

JavaScript 可以透過 CSS 物件模型介面 CSSKeyframesRule 訪問 @keyframes @規則。

有效的關鍵幀列表

如果關鍵幀規則未指定動畫的開始或結束狀態（即 0%/from 和 100%/to），瀏覽器將使用元素的現有樣式作為開始/結束狀態。這可用於使元素從其初始狀態動畫化並返回。

關鍵幀規則中無法動畫化的屬性將被忽略，但受支援的屬性仍將動畫化。

解決重複項

如果給定名稱存在多個關鍵幀集，則使用解析器遇到的最後一個。@keyframes 規則不會級聯，因此動畫絕不會從多個規則集中獲取關鍵幀。

如果某個動畫時間偏移量重複，則該百分比的 @keyframes 規則中的所有關鍵幀都將用於該幀。如果多個關鍵幀指定相同的百分比值，則 @keyframes 規則記憶體在級聯。

當某些關鍵幀中省略屬性時

如果可能，未在每個關鍵幀中指定的屬性將進行插值處理——無法進行插值處理的屬性將從動畫中刪除。例如

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

在此處，top 屬性使用 0%、30% 和 100% 關鍵幀進行動畫處理，left 屬性使用 0%、68%、72% 和 100% 關鍵幀進行動畫處理。

當關鍵幀被多次定義時

如果關鍵幀被多次定義，但並非所有受影響的屬性都在每個關鍵幀中，則會考慮這些關鍵幀中指定的所有值。例如

@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

在此示例中，在 50% 關鍵幀處，使用的值是 top: 10px 和 left: 20px。

Firefox 14 及更高版本支援級聯關鍵幀。

關鍵幀中的 !important

帶有 !important 限定符的關鍵幀中的宣告將被忽略。

@keyframes important1 {
  0% {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important; /* ignored */
  }
  100% {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

正式語法

@keyframes = 
  @keyframes <keyframes-name> { <qualified-rule-list> }  

<keyframes-name> = 
  <custom-ident>  |
  <string>        

示例

CSS 動畫示例

請參閱使用 CSS 動畫和使用滾動驅動動畫滾動動畫元素以獲取示例。

規範

瀏覽器相容性

另見

• animation-range
• CSS 滾動驅動動畫
• 使用 CSS 動畫
• CSS 動畫模組
• 使用滾動驅動動畫滾動動畫元素
• AnimationEvent