CSS @property 自訂屬性漸層動畫教學：讓漸層終於動起來的魔法

你有沒有試過用 CSS transition 讓一個漸層背景平滑過渡，結果發現它根本不會動，只會「啪」一下直接跳到新顏色？我第一次遇到這個問題的時候，花了整整一個下午在 Stack Overflow 上找答案，最後才發現——原來瀏覽器根本不知道怎麼對漸層做補間動畫。

直到我認識了 CSS @property，一切都改變了。今天就來跟大家分享這個讓漸層動畫真正活起來的祕密武器。

為什麼漸層不能直接做動畫？

先搞清楚問題的根源。當我們寫 background: linear-gradient(red, blue) 的時候，瀏覽器把整個漸層當成一張「圖片」來處理。CSS 動畫引擎知道怎麼在兩個顏色之間做補間，也知道怎麼在兩個數字之間做補間，但它不知道怎麼在兩張「圖片」之間做補間。

這就是為什麼你對 background-image 加 transition 完全沒有效果。瀏覽器只能選擇直接切換，沒有中間過程。

CSS @property 是什麼？

@property 是 CSS Houdini 規範的一部分，它讓我們可以正式向瀏覽器「註冊」一個自訂屬性，告訴它這個屬性的型別、初始值和是否繼承。關鍵在於：一旦瀏覽器知道了型別，它就知道怎麼做補間動畫了。

基本語法長這樣：

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}

三個必填欄位：

• syntax：告訴瀏覽器這個變數的型別，例如 <color>、<length>、<percentage>、<number> 等
• inherits：是否從父元素繼承，通常設為 false
• initial-value：預設值，必須符合 syntax 定義的型別

如果你對 CSS 自訂屬性的其他應用有興趣，可以看看CSS 自訂屬性主題切換教學，那篇文章深入介紹了用自訂屬性做主題切換的技巧。

用 @property 實現漸層色彩過渡動畫

重點來了。既然瀏覽器不能對整個漸層做補間，那我們就把漸層裡的「顏色」抽出來，註冊成有型別的自訂屬性，讓瀏覽器對顏色本身做補間。

@property --gradient-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #667eea;
}

@property --gradient-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #764ba2;
}

.gradient-box {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  transition: --gradient-start 0.8s ease, --gradient-end 0.8s ease;
}

.gradient-box:hover {
  --gradient-start: #f093fb;
  --gradient-end: #f5576c;
}

就這麼簡單！當滑鼠移上去的時候，漸層的兩個顏色會平滑過渡，而不是直接跳變。這個效果在以前是不可能只用 CSS 做到的，通常需要 JavaScript 搭配 requestAnimationFrame 才行。

進階：用 @keyframes 做循環漸層動畫

除了 hover 效果，我們還可以搭配 @keyframes 做出永不停止的漸層色彩循環：

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --color-a {
  syntax: '<color>';
  inherits: false;
  initial-value: #12c2e9;
}

@property --color-b {
  syntax: '<color>';
  inherits: false;
  initial-value: #c471ed;
}

.animated-gradient {
  background: linear-gradient(var(--angle), var(--color-a), var(--color-b));
  animation: gradient-shift 4s ease-in-out infinite alternate;
}

@keyframes gradient-shift {
  0% {
    --angle: 0deg;
    --color-a: #12c2e9;
    --color-b: #c471ed;
  }
  50% {
    --angle: 90deg;
    --color-a: #f64f59;
    --color-b: #c471ed;
  }
  100% {
    --angle: 180deg;
    --color-a: #12c2e9;
    --color-b: #f5af19;
  }
}

注意到了嗎？我們連漸層的角度都可以動畫化，因為 <angle> 也是一個瀏覽器認識的型別。這讓漸層動畫的可能性大幅提升。

如果你想把這種動畫效果應用在頁面切換上，推薦搭配CSS View Transitions API 頁面轉場動畫，可以做出非常驚豔的過場效果。

實戰案例：呼吸燈按鈕效果

來看一個實際應用。很多 SaaS 產品的 CTA 按鈕會有一種「呼吸」般的漸層動畫，用 @property 實現起來非常優雅：

@property --btn-glow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(99, 102, 241, 0.4);
}

.cta-button {
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 24px var(--btn-glow);
  animation: breathe 2s ease-in-out infinite alternate;
}

@keyframes breathe {
  to {
    --btn-glow: rgba(139, 92, 246, 0.8);
  }
}

這裡我用 @property 註冊了一個顏色變數，然後在 box-shadow 裡使用它。透過動畫改變這個顏色的透明度，就能做出自然的呼吸燈效果。不需要任何 JavaScript。

搭配捲動驅動動畫更強大

如果你已經熟悉CSS 捲動驅動動畫的概念，把 @property 跟 animation-timeline: scroll() 結合，就能做出「隨著捲動改變漸層顏色」的效果。想像一下：使用者往下滾動頁面，背景的漸層從冷色調慢慢過渡到暖色調，整個體驗非常沉浸。

.scroll-gradient {
  background: linear-gradient(to bottom, var(--color-a), var(--color-b));
  animation: scroll-colors auto linear;
  animation-timeline: scroll();
}

@keyframes scroll-colors {
  from {
    --color-a: #1a1a2e;
    --color-b: #16213e;
  }
  to {
    --color-a: #e94560;
    --color-b: #f5af19;
  }
}

瀏覽器支援與注意事項

截至 2026 年，@property 在 Chrome、Edge、Safari 和 Firefox 都已經獲得支援。不過在實作時要注意幾點：

• Fallback 很重要：對於不支援 @property 的舊瀏覽器，漸層不會動但會正常顯示靜態漸層，算是優雅降級
• syntax 值必須精確：如果你定義了 <color> 但給了一個非顏色的值，瀏覽器會忽略你的設定
• 效能表現優秀：因為是瀏覽器原生支援的動畫補間，效能比 JavaScript 方案好很多，不會掉幀
• 不能用於 shorthand：@property 的 syntax 目前不支援像 <color>+ 這樣的複合型別，所以每個你想動畫的值都要獨立註冊

在管理越來越複雜的 CSS 架構時，善用CSS @layer 層疊管理來組織你的樣式規則，可以避免動畫樣式被意外覆蓋。

總結

@property 解決了 CSS 動畫領域一個長期存在的痛點——漸層無法平滑過渡。透過向瀏覽器註冊自訂屬性的型別資訊，我們終於可以用純 CSS 實現以前只有 JavaScript 才做得到的漸層動畫效果。

從簡單的 hover 漸層過渡，到進階的循環色彩動畫、呼吸燈效果，甚至是搭配捲動驅動的沉浸式體驗，@property 都是你工具箱裡不可或缺的利器。趕快打開你的編輯器試試看吧！