介紹

關(guān)鍵幀 @keyframes at-rule 規(guī)則通過在動畫序列中定義關(guān)鍵幀（或 waypoints）的樣式來控制 CSS 動畫序列中的中間步驟。和 轉(zhuǎn)換 transition 相比，關(guān)鍵幀 keyframes 可以控制動畫序列的中間步驟。

JavaScript 可以通過 CSS 對象模型的 CSSKeyframesRule 接口來訪問 @keyframes。

?

語法：

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

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

• custom-ident：幀列表的名稱。名稱必須符合 CSS 語法中對標(biāo)識符的定義。

• from：等價于 0%，開始的地方。

• to：等價于 100%。結(jié)束的地方。

• <percentage>：動畫序列中觸發(fā)關(guān)鍵幀的時間點，使用百分值來表示。

?

應(yīng)用

要使用關(guān)鍵幀，先創(chuàng)建一個帶名稱的 @keyframes 規(guī)則，以便后續(xù)使用 animation-name屬性將動畫同其關(guān)鍵幀聲明匹配。每個 @keyframes 規(guī)則包含多個關(guān)鍵幀，也就是一段樣式塊語句，每個關(guān)鍵幀有一個百分比值作為名稱，代表在動畫進(jìn)行中，在哪個階段觸發(fā)這個幀所包含的樣式。

可以按任意順序列出關(guān)鍵幀百分比；它們將按照其應(yīng)該發(fā)生的順序來處理。

讓關(guān)鍵幀序列生效

如果一個關(guān)鍵幀規(guī)則沒有指定動畫的開始或結(jié)束狀態(tài)（也就是，0%/from 和100%/to，瀏覽器將使用元素的現(xiàn)有樣式作為起始/結(jié)束狀態(tài)。這可以用來從初始狀態(tài)開始元素動畫，最終返回初始狀態(tài)。

如果在關(guān)鍵幀的樣式中使用了不能用作動畫的屬性，那么這些屬性會被忽略掉，支持動畫的屬性仍然是有效的，不受波及。

重復(fù)定義

如果多個關(guān)鍵幀使用同一個名稱，以最后一次定義的為準(zhǔn)。

@keyframes 不存在層疊樣式 (cascade) 的情況，所以動畫在一個時刻（階段）只會使用一個的關(guān)鍵幀的數(shù)據(jù)。

如果一個 @keyframes 內(nèi)的關(guān)鍵幀的百分比存在重復(fù)的情況，則 @keyframes 規(guī)則中該百分比的所有關(guān)鍵幀都將用于該幀。如果多個關(guān)鍵幀指定了相同的百分比值，則 @keyframes 規(guī)則內(nèi)是可以使用層疊樣式的。

屬性個數(shù)不定

如果一個關(guān)鍵幀中沒有出現(xiàn)其他關(guān)鍵幀中的屬性，那么這個屬性將被當(dāng)作插值使用（不能使用插值的屬性除外，這些屬性會被忽略掉）。

例如：

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

例子中，top屬性分別出現(xiàn)在關(guān)鍵幀 0%、30% 和 100% 的中，而 left屬性分別出現(xiàn)在關(guān)鍵幀 0%、68%、72% 和 100% 中。

同一關(guān)鍵幀中的相同屬性被重復(fù)定義

如果某一個關(guān)鍵幀出現(xiàn)了重復(fù)的定義，且重復(fù)的關(guān)鍵幀中的 CSS 屬性值不同，則以最后一次定義的屬性為準(zhǔn)。例如：

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

上面這個例子中，50% 關(guān)鍵幀中分別最后設(shè)置的屬性 top: 10px 和 left: 20px 是有效的，但是其他的屬性會被忽略。

Firefox 14 開始支持層疊 keyframes。

關(guān)鍵幀中的 !important

關(guān)鍵幀中出現(xiàn)的 !important 將會被忽略。

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* 忽略 */
  to   { margin-top: 100px; }
}

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