帶關鍵幀的動畫

對於多階段 CSS 動畫，你可以建立 CSS @keyframes。關鍵幀允許你定義多個動畫點，稱為關鍵幀，以定義更復雜的動畫。

基本例子

在這個例子中，我們將製作一個在所有顏色之間迴圈的基本背景動畫。

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

檢視結果

這裡有一些不同的注意事項。首先，實際的 @keyframes 語法。

@keyframes rainbow-background{

這會將動畫的名稱設定為 rainbow-background。

0%     { background-color: #ff0000; }

這是動畫中關鍵幀的定義。第一部分，案例中的 0%，定義了動畫期間關鍵幀的位置。0%意味著它從一開始就佔總動畫時間的 0％。

動畫將在關鍵幀之間自動轉換。因此，通過在 8.333%設定下一個背景顏色，動畫將平滑地佔用 8.333％的時間來在這些關鍵幀之間進行轉換。

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

此程式碼將我們的動畫附加到具有 .RainbowBackground 類的所有元素。

實際的動畫屬性採用以下引數。

• animation-name ： 動畫的名稱。在這種情況下，rainbow-background
• animation-duration ：動畫需要多長時間，在這種情況下為 5 秒。
• animation-iteration-count（可選） ：動畫迴圈的次數。在這種情況下，動畫將無限期地繼續。預設情況下，動畫將播放一次。
• animation-delay（可選） ：指定動畫開始前等待的時間。預設為 0 秒，可以取負值。例如，-2s 會將動畫啟動 2 秒進入迴圈。
• animation-timing-function（可選） ：指定動畫的速度曲線。預設為 ease，動畫開始變慢，速度變慢，結束變慢。

在這個特定的例子中，0%和 100%關鍵幀都指定了 { background-color: #ff0000; }。只要兩個或多個關鍵幀共享一個狀態，就可以在一個語句中指定它們。在這種情況下，兩條 0%和 100%線可以用這一條線代替：

0%, 100%     { background-color: #ff0000; }

跨瀏覽器相容性

對於較舊的基於 WebKit 的瀏覽器，你需要在 @keyframes 宣告和 animation 屬性上使用供應商字首，如下所示：

@-webkit-keyframes{}

-webkit-animation: ...