CSS 關鍵影格動畫（Keyframes）教學

更新日期： 2024 年 11 月 12 日

CSS 動畫可以讓網頁元素在不依賴 JavaScript 的情況下實現豐富的動畫效果。

在這篇文章中，我們會深入了解如何使用關鍵影格（Keyframes）定義動畫，以及如何在 CSS 中應用動畫效果，並探討各種動畫控制方式。

關鍵影格的基本概念

CSS 關鍵影格（Keyframes）是用來定義一個動畫中，各個階段的樣式變化。

透過 @keyframes 關鍵影格規則，我們可以描述動畫的起始狀態、中間過程以及結束狀態。

例如，讓一個元素的背景顏色從黑色變為粉色，就可以使用關鍵影格來描述這一變化過程。

寫法一：基本的 Keyframes 寫法

以下是最基本的關鍵影格語法，定義了動畫的起始和結束狀態。

@keyframes colorChange {
    from {
        background-color: #000; /* 起始狀態：黑色 */
    } 
    to {
        background-color: pink; /* 結束狀態：粉色 */
    }
}

這樣定義的 colorChange 動畫會讓元素的背景顏色，從黑色過渡到粉色，適合用於簡單的顏色過渡效果。

將動畫應用到元素上

定義好動畫之後，可以將它應用到特定元素。以下是範例的 .box 元素設置，包含了動畫效果的應用：

.box {
    width: 200px;
    height: 200px;
    background: #000;
    position: absolute;
    inset: 0;
    margin: auto;
    animation: colorChange 1s;
}

• animation: colorChange 1s;：這行代碼表示為 .box 元素應用 colorChange 動畫，動畫持續時間為 1 秒。

這樣設置後，.box 的背景色會在 1 秒內從黑色平滑過渡到粉色。

更複雜的 Keyframes 設定

關鍵影格除了設定起始（from）和結束（to）狀態，還可以在動畫的過程中加入更多變化。

例如，可以在動畫過程的中間階段設定另一種顏色。

寫法二：多階段的 Keyframes 設定

使用百分比，來表示動畫進行到某個階段時，應該呈現的效果：

@keyframes colorChange {
    0% {
        background-color: #000; /* 起始狀態：黑色 */
    } 
    50% {
        background-color: pink; /* 中間狀態：粉色 */
    } 
    100% {
        background-color: olive; /* 結束狀態：橄欖綠色 */
    }
}

在這段代碼中，0% 表示動畫開始時的樣式，50% 表示動畫過程中的樣式，而 100% 則表示動畫結束時的樣式。

這樣設置後，動畫會依次從黑色變為粉色，然後再變為橄欖綠色。

增加延遲和調整動畫時長

我們可以通過設定 animation 屬性來控制動畫的開始時間和持續時間。

例如：

.box {
    width: 200px;
    height: 200px;
    background: #000;
    position: absolute;
    inset: 0;
    margin: auto;
    animation: colorChange 1s 0.3s;
}

• 1s 表示動畫的總持續時間為 1 秒。
• 0.3s 表示動畫延遲 0.3 秒後才開始播放。

這樣設置後，動畫會在等待 0.3 秒後開始，並持續 1 秒的時間完成整個顏色變化過程。

動畫的循環播放與方向控制

動畫不僅可以播放一次，也可以設置為不斷循環重播。

還可以控制動畫的播放方向，例如從頭到尾播放，再從尾到頭回播。

無限循環播放

如果希望動畫無限次重播，可以在動畫屬性中使用 infinite：

.box {
    animation: colorChange 1s infinite;
}

這樣設置後，.box 元素的背景顏色會從黑色到粉色再到橄欖綠色，並無限次重複這個過程。

控制播放方向：alternate 與 alternate-reverse

動畫還可以設置為來回播放，這樣在到達終點後會反向播放，形成一種循環效果。

• alternate：動畫會按正向播放完後，從頭到尾再反向播放。
  
  例如，顏色會從黑色變成粉色、橄欖綠，然後再從橄欖綠變回粉色、黑色。

  .box {
      animation: colorChange 1s infinite alternate;
  }

• alternate-reverse：動畫會從結束狀態開始反向播放，播放順序為橄欖綠 -> 粉色 -> 黑色，之後再反方向回播。

  .box {
      animation: colorChange 1s infinite alternate-reverse;
  }

這樣的設置可以使動畫更具動態效果，適合用於強調重複變化的設計需求。

總結

透過 CSS 關鍵影格（Keyframes），我們可以實現多種動畫效果，讓網頁更生動。

在使用 @keyframes 定義動畫時，記得以下幾點：

1. 設定動畫的不同階段：用 from-to 或 百分比 語法控制動畫的各個階段變化。
2. 應用動畫屬性：使用 animation 屬性控制動畫的持續時間、延遲時間等。
3. 循環與播放控制：infinite 使動畫無限循環，alternate 和 alternate-reverse 可以控制播放方向，形成來回效果。

熟悉這些設定方法後，就可以使用 CSS 動畫來增強網站的視覺吸引力和互動性。