Day 6：CSS 過渡與動畫 (Transition & Animation)

2025 iThome 鐵人賽

DAY 6

Modern Web

Modern Web：從基礎、框架到前端學習系列第 6 篇

17th鐵人賽

zoeeyee

2025-09-20 13:39:23

93 瀏覽

分享至

到目前為止，我們已經會用 HTML 與 CSS 做出結構與排版，也能用 RWD 讓網頁在不同裝置下呈現。
但一個「漂亮」的網頁，還需要一點點互動與動態效果，這就是今天的主角 —— CSS 動畫。

1. Transition：平滑過渡

Transition 可以讓元素在屬性改變時，產生「漸進效果」。
常用於 hover 效果、按鈕點擊、顏色改變。

語法

transition: [屬性] [持續時間] [緩動效果] [延遲時間];

屬性：要套用過渡的 CSS 屬性（例：color、background、all）。
持續時間：動畫時間，例如 0.3s。
緩動效果 (timing function)：
- linear → 均速
- ease → 慢-快-慢
- ease-in → 由慢到快
- ease-out → 由快到慢
- ease-in-out → 慢-快-慢

範例：按鈕 hover 效果

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Transition 範例</title>
  <style>
    .btn {
      background: #2196F3;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .btn:hover {
      background: #1976D2;
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <button class="btn">滑過我</button>
</body>
</html>

👉 滑鼠移過去時，顏色會漸變，按鈕也會微微放大。

2. Animation：進階動畫

Animation 可以讓元素透過「關鍵影格 (keyframes)」控制更複雜的動畫，甚至能無限循環。

語法

@keyframes 動畫名稱 {
  0%   { 屬性: 值; }
  50%  { 屬性: 值; }
  100% { 屬性: 值; }
}

.element {
  animation: 動畫名稱 持續時間 緩動效果 延遲 次數 方向 填充模式;
}

常用參數：

infinite → 無限循環
alternate → 來回播放
forwards → 保持在最後一格狀態

範例：跳動的方塊

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Animation 範例</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: #E91E63;
      position: relative;
      animation: bounce 2s ease-in-out infinite alternate;
    }

    @keyframes bounce {
      0%   { top: 0; }
      100% { top: 200px; }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

👉 這個方塊會上下跳動，模擬「彈跳」的效果。

範例：淡入淡出 (Fade In & Out)

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.fade {
  animation: fadeInOut 3s ease-in-out infinite;
}

套在元素上就能產生淡入淡出的效果，非常適合提示訊息或 Loading 動畫。

3. Transition vs Animation 差別

特性→Transition/Animation

觸發方式→需要事件 (hover, click, JS)/可自動播放
控制程度→簡單，兩個狀態之間切換/複雜，可設定多個關鍵影格
使用情境→hover 效果、按鈕反饋/Loading、跑馬燈、背景動畫

最佳實踐

✅ 適合用 Transition 做簡單互動（hover、按鈕點擊）。
✅ 複雜動畫則用 Animation（淡入淡出、跑馬燈、Loading）。
✅ 避免過度使用，太多動畫會影響效能與使用者體驗。
✅ 行動裝置特別要注意效能，盡量用 transform 和 opacity，少用 top / left。