CSS - transition 粗淺記憶 Detail - 前端,web,Html,Css 【唐】三三 Blog

Stories

Detail

CSS - transition 粗淺記憶 - Stories Detail

01:45 PM · Nov 06 ,2025

在 CSS 中，transition 是用於實現元素樣式平滑過渡的屬性，能讓元素從一種樣式狀態（如顏色、尺寸、位置等）逐漸變化到另一種狀態，避免樣式突變帶來的生硬感。它是實現基礎動畫效果的核心工具，廣泛用於 hover 交互、狀態切換等場景。

一、`transition` 核心語法

transition 是一個複合屬性，可以同時定義過渡的多個參數，語法如下：

css

transition: [過渡屬性] [過渡時長] [過渡 timing 函數] [延遲時間];

各參數的含義和規則：

參數	説明	可選值 / 示例	是否必填
過渡屬性（property）	指定哪些 CSS 屬性需要過渡（如 `width`、`background`，`all` 表示所有屬性）	`width`、`background`、`all` 等	否（默認 `all`）
過渡時長（duration）	過渡效果持續的時間（必須設置，否則無過渡效果）	`0.3s`、`500ms`（秒 / 毫秒）	是
timing 函數	過渡速度的變化曲線（控制動畫的 “節奏感”）	`ease`（默認）、`linear`、`ease-in` 等	否
延遲時間（delay）	延遲多久開始過渡	`0s`（默認）、`0.5s`	否

二、核心參數詳解

1. 過渡屬性（`transition-property`）

作用：指定哪些 CSS 屬性發生變化時會觸發過渡效果。
常見值：
- all：所有可過渡的屬性變化都觸發（常用，但性能略差）。
- 具體屬性：如 width、height、background-color、transform 等（推薦按需指定，優化性能）。
注意：不是所有 CSS 屬性都支持過渡，如 display（無法平滑過渡）、position 等，可過渡屬性參考 MDN 列表。

2. 過渡時長（`transition-duration`）

作用：定義過渡效果從開始到結束的時間，必須設置（默認 0s，無過渡）。
單位：s（秒）或 ms（毫秒），如 0.5s 或 500ms。
示例：transition-duration: 0.3s 表示過渡持續 0.3 秒。

3. Timing 函數（`transition-timing-function`）

作用：控制過渡過程中的速度變化，決定動畫的 “節奏”。
常用值：
- ease（默認）：先慢 → 快 → 慢（適合大多數交互）。
- linear：勻速（適合平移、旋轉等均勻運動）。
- ease-in：開始慢，逐漸加快（適合 “進入” 場景）。
- ease-out：開始快，逐漸減慢（適合 “退出” 場景）。
- ease-in-out：開始和結束都慢，中間快（對稱效果）。
- 貝塞爾曲線：cubic-bezier(x1, y1, x2, y2) 可自定義複雜曲線（如 cubic-bezier(0.25, 0.1, 0.25, 1)）。

4. 延遲時間（`transition-delay`）

作用：指定觸發過渡後，延遲多久開始執行。
示例：transition-delay: 0.2s 表示觸發後等待 0.2 秒再開始過渡。

三、使用場景與示例

1. 基礎示例：按鈕 hover 效果

實現按鈕在 hover 時背景色、陰影、尺寸的平滑過渡：

_2025-10-05_23-49-17

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      background: #3b82f6;
      color: white;
      font-size: 16px;
      cursor: pointer;
      
      /* 過渡配置：所有屬性，0.3秒，ease曲線 */
      transition: all 0.3s ease;
    }

    .btn:hover {
      /* hover 時的樣式變化 */
      background: #2563eb; /* 深色背景 */
      transform: translateY(-2px); /* 上移2px */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 加深陰影 */
    }
  </style>
</head>
<body>
  <button class="btn">Hover 我</button>
</body>
</html>

解析：

按鈕默認狀態定義了 transition: all 0.3s ease，表示所有樣式變化都將在 0.3 秒內以 ease 曲線過渡。
當鼠標 hover 時，background、transform、box-shadow 同時變化，這些變化會被過渡效果 “平滑化”，而非瞬間切換。

3. 延遲過渡：實現序列動畫

通過 transition-delay 讓多個元素按順序觸發過渡，形成動畫序列：

_2025-10-05_23-54-53

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      gap: 10px;
      margin: 20px;
    }

    .dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #6366f1;
      
      /* 基礎過渡配置：尺寸變化，0.3秒 */
      transition: transform 0.3s ease;
    }

    /* 為每個圓點設置不同延遲 */
    .dot:nth-child(1) { transition-delay: 0s; }
    .dot:nth-child(2) { transition-delay: 0.1s; }
    .dot:nth-child(3) { transition-delay: 0.2s; }
    .dot:nth-child(4) { transition-delay: 0.3s; }

    .container:hover .dot {
      transform: scale(1.5); /* 所有圓點放大1.5倍 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</body>
</html>

解析：

4 個圓點的過渡屬性相同，但 transition-delay 依次增加 0.1s，當容器 hover 時，會按順序逐個放大，形成 “波浪式” 動畫。

4. 配合 transform 實現複雜動畫

transition 與 transform（變形）結合是最常用的動畫組合，可實現平移、旋轉、縮放等效果：

_2025-10-05_23-57-00

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 200px;
      height: 150px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      
      /* 過渡：transform和box-shadow，0.5秒 */
      transition: transform 0.5s ease, box-shadow 0.5s ease;
    }

    .card:hover {
      /* 上移+放大+加深陰影 */
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }
  </style>
</head>
<body>
  <div class="card">Hover 我</div>
</body>
</html>

解析：

transform 同時實現 translateY（上移）和 scale（放大），transition 讓這些變形平滑進行，配合陰影變化，模擬卡片 “浮起” 的立體感。

四、注意事項

觸發條件：transition 需要樣式變化才能觸發，常見觸發方式：
- 偽類：:hover、:active、:focus 等。
- 類名變化：通過 JS 動態添加 / 移除類（如 element.classList.add('active')）。
- 媒體查詢：窗口大小變化觸發樣式調整。
性能優化：
- 優先過渡 transform 和 opacity，這兩個屬性不會觸發瀏覽器的 “重排重繪”，性能更好。
- 避免使用 transition: all（會監聽所有屬性變化，浪費性能），儘量指定具體屬性（如 transition: width 0.3s）。
兼容性：現代瀏覽器（Chrome、Firefox、Edge、Safari 10+）均支持，無需前綴；IE10 及以上部分支持，低版本 IE 不支持。
侷限性：transition 只能實現 “從 A 到 B” 的一次性過渡，無法實現循環動畫或複雜時間線動畫（這類需求需用 animation 屬性）。

五、`transition` 與 `animation` 的區別

特性	`transition`	`animation`
觸發方式	需要樣式變化觸發（被動）	可自動觸發，支持循環（主動）
複雜度	適合簡單的 “狀態切換” 動畫	適合複雜的多關鍵幀動畫
控制能力	僅能定義開始和結束狀態	可定義多個關鍵幀（`@keyframes`）
循環	不支持循環（需手動重置樣式）	支持 `animation-iteration-count` 循環