CSS 動畫教學：從 @keyframes 到屬性設定的完整實作

CSS Animation 是什麼？用它能做哪些動畫？

CSS Animation 是一種純粹使用 CSS 屬性來定義與執行網頁動畫的技術，它能讓元素在不同狀態之間產生平滑的過渡效果。相較於 JavaScript 動畫，它的主要優勢在於性能表現優異，因為動畫的計算與執行由瀏覽器的合成器（Compositor）處理，能有效避開繁重的版面計算（Layout），流暢度通常更佳。此外，其宣告式的語法讓動畫的定義與樣式分離，便於維護與修改，開發者無需編寫複雜的 JS 邏輯就能實現許多互動效果。常見的應用場景包括：按鈕在懸停時的微交互反饋、頁面載入時的引導式動畫、滾動時觸發的元素淡入效果，以及用來吸引使用者視覺焦點的循環提示動畫。

核心語法解析：`@keyframes` 與基本結構

要建立一個可運行的 CSS 動畫，必須完成兩個核心步驟：首先使用 `@keyframes` 規則定義動畫序列，然後透過選擇器的 `animation` 相關屬性將其啟用。`@keyframes` 用於指定動畫中間狀態的關鍵影格，可以使用 `from`（等同 `0%`）與 `to`（等同 `100%`）來定義起始與結束，或使用百分比來設定多個中間狀態。接著，在目標元素的樣式規則中，必須透過 `animation-name` 屬性連結此 `@keyframes` 的名稱，並透過 `animation-duration` 設定動畫播放一次所需的時間長度，例如 `1s` 或 `500ms`。

/* 步驟一：定義關鍵影格 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 步驟二：應用動畫至元素 */
.box {
  animation-name: slideIn;
  animation-duration: 0.8s;
}

完整屬性參考表

除了基礎的名稱與時間，`animation-*` 系列屬性提供了豐富的控制選項，讓動畫行為更貼合需求。以下表格整理了主要屬性及其常用值，是實作時的重要速查參考。

動畫屬性速查：`animation` 簡寫

為了提升開發效率，可以使用 `animation` 簡寫屬性，將上述多個屬性合併至一行宣告中。其正確的語法順序為：`animation: 名稱 時間 速度曲線 延遲 重複次數 方向 填充模式`。務必留意，簡寫屬性中容易遺漏的順序問題，以及最後一個數值若為時間單位，可能會被誤判為 `animation-duration`。

/* 完整寫法 */
.box {
  animation-name: slideIn;
  animation-duration: 0.8s;
  animation-timing-function: ease;
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

/* 使用簡寫屬性改寫 */
.box {
  animation: slideIn 0.8s ease 0.2s both;
}

<button class="hover-btn">懸停我</button>

.hover-btn {
  padding: 0.8rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  /* 確保過渡效果平滑 */
  transition: transform 0.2s ease;
}

.hover-btn:hover {
  transform: scale(1.05);
}

<div class="fade-item">項目一</div>
<div class="fade-item">項目二</div>
<div class="fade-item">項目三</div>

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-item {
  opacity: 0;
  /* 元素初始狀態為透明且偏移，準備好被動畫觸發 */
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.2s;
}

/* 為不同項目錯開動畫時間 */
.fade-item:nth-child(2) { animation-delay: 0.4s; }
.fade-item:nth-child(3) { animation-delay: 0.6s; }