CSS @keyframes 進階動畫技巧：打造精緻微互動的完整教學

@keyframes 基礎回顧

@keyframes 是 CSS 動畫的核心，讓你定義動畫在不同時間點的狀態。從 from 到 to 兩個關鍵幀搭配 animation 屬性，就能讓元素動起來。現代瀏覽器對 CSS 動畫的支援已經非常完整，Chrome、Firefox、Safari 支援率高達 97% 以上。隨著 animation-composition 等新屬性的加入，純 CSS 能做到的事情越來越多，很多以前需要 JavaScript 才能實現的效果，現在用 CSS 就能搞定。今天我們跳過基礎，直接挑戰那些讓動畫從「堪用」變成「精緻」的技術細節。

進階 Timing Function：cubic-bezier 與 steps()

Timing function 決定動畫的節奏感，這是讓動畫感覺有生命的關鍵。預設的 ease、linear、ease-in-out 好用，但真正的精緻感來自客製化的 cubic-bezier。

cubic-bezier(x1, y1, x2, y2) 定義了一條貝塞爾曲線，控制動畫速度的變化節奏。當 y 值超過 1 時，動畫會超出目標值後再回彈，產生彈性效果。cubic-bezier(0.34, 1.56, 0.64, 1) 是常用的彈性效果曲線；cubic-bezier(0.55, 0, 1, 0.45) 製造急加速感——開頭慢，中段快速爆發。推薦使用 Chrome DevTools 的 cubic-bezier 編輯器即時預覽調整效果。

steps(n, direction) 讓動畫以離散步驟進行。打字機效果是最經典的應用：設定 overflow: hidden 搭配 white-space: nowrap，用 steps(30, end) 讓文字逐格出現，完美模擬老式打字機。steps() 也適合做 sprite 動畫，把多格畫面排在一張圖片逐格播放。

多步驟動畫設計：百分比關鍵幀

真正的進階動畫很少只有 from 和 to 兩個狀態。用百分比關鍵幀可以設計出複雜的多段動畫序列。以彈跳效果為例：0% 正常大小，20% 輕微縮小（蓄力感），50% 放大到 115%（彈出），70% 回到 98%（過衝後回彈），85% 微微放大到 105%，100% 回到正常。這個序列模擬了真實的彈性物理，比單純的兩幀動畫豐富許多，關鍵在於中間加入的「過衝」和「回彈」步驟。

同一個 @keyframes 可以同時控制多個屬性，讓它們以不同節奏變化。進場動畫中，opacity 在 60% 就達到 0.8，但 transform 的位移還在繼續微調。這種非同步的設計讓動畫更有層次感，避免所有效果同時到達終點的呆板感。

微互動設計模式

微互動（Micro-interaction）是那些細小但關鍵的回饋動畫，讓使用者知道他們的操作有被接收。

按鈕 Hover 效果

按鈕的 hover 效果要設計兩個狀態：hover 時輕微上移搭配陰影增大，製造浮起的感覺；active 時回到原位並縮小陰影，製造按下去的觸感。active 狀態的設計讓按鈕像真實的實體按鍵，大幅提升操作的滿足感。transition 用 cubic-bezier(0.34, 1.56, 0.64, 1) 加入一點彈性，效果更棒。

Loading 狀態動畫

Loading 動畫分兩種主要類型：脈動（pulse）適合 skeleton loading，讓佔位元素在 opacity 1 到 0.4 之間循環，建議時長 1.5s；旋轉（spin）適合圓形 spinner，用 linear timing function 保持等速旋轉，搭配 infinite 循環。

Toggle Switch 切換動畫

Toggle switch 的圓形滑塊移動要有慣性感。在中間關鍵幀加入 scaleX 拉伸——滑塊移動時先橫向拉長（模擬橡皮筋效果），到達終點時再恢復圓形。這個細節就是讓 toggle 從普通變成精緻的關鍵，實作起來只需要三個關鍵幀。

通知徽章彈出

通知徽章從 scale(0) 配合輕微旋轉開始，到 60% 時超過目標大小（scale 1.2），最後穩定在正常大小，同時加入 rotate 的小幅回彈，讓徽章出現時更活潑有趣。設計微互動時，可以搭配 AE 表達式動畫教學 中介紹的動畫原則，把 easing 和 timing 的概念從 After Effects 移植到 CSS，動畫感更上一層樓。

animation-composition 屬性

這是 2023 年瀏覽器才廣泛支援的新屬性，很多開發者還不知道它的存在。animation-composition 控制當多個動畫同時影響同一個屬性時，效果如何疊加。有三個值可選：replace（預設，後面的動畫完全覆蓋前面的）、add（效果相加）、accumulate（類似 add，但對某些函式有特殊計算邏輯）。

實際應用場景：當你同時執行「向右移動」和「上下彈跳」兩個動畫時，用 accumulate 就能讓兩個效果正確疊加，不需要在其中一個 @keyframes 裡手動計算合併後的值。這在複雜的動畫系統中能大幅降低程式碼複雜度。也可以搭配 Cavalry 程序化動態設計 的模組化概念，用積木式的方式組合動畫效果。

效能優化策略

寫出漂亮的動畫只是第一步，確保它在各種裝置上流暢才是真本事。transform 和 opacity 可以直接在 GPU 上執行，不需要觸發瀏覽器的 layout 或 paint 流程——這是 CSS 動畫效能的黃金法則。用 transform: translate() 取代 left、top、margin 做位移；用 transform: scale() 取代 width、height 做縮放；避免動畫 background-color、border 等會觸發 repaint 的屬性。

will-change: transform, opacity 告訴瀏覽器這個元素即將被動畫，讓它提前做 GPU 層提升的準備。但不要濫用，每個 will-change 都會消耗記憶體，只對真正需要的元素使用。另外使用 @media (prefers-reduced-motion: reduce) 媒體查詢，對選擇減少動畫的使用者關閉或簡化動畫效果，這是無障礙設計的基本要求。

CSS vs JS 動畫決策框架

選擇 CSS 動畫的情況：固定的循環動畫、hover 和 focus 互動效果、簡單的進入離場過渡、效能要求高但邏輯簡單的場景。選擇 JS 動畫的情況：需要根據使用者輸入動態計算動畫值、需要精確控制播放進度、需要在動畫中途改變方向或速度、使用物理模擬引擎。可以參考 AE Shape Layer 教學 中的動畫設計思維，很多關於 easing curve 和 timing 的直覺在 CSS 動畫中同樣適用。

實戰：打造一個微互動函式庫

把上面學到的技術整合成一個可複用的微互動 CSS 函式庫。建立 micro-interactions.css 檔案，定義常用的動畫 class：彈跳進入（mi-bounce-in）用 cubic-bezier(0.34, 1.56, 0.64, 1) 製造彈性效果；淡入上移（mi-fade-up）給內容進場使用；脈動提示（mi-pulse）用於 skeleton loading；震動提示（mi-shake）用於表單驗證錯誤回饋，左右晃動讓使用者直觀感受到這裡有問題。

這個函式庫讓你在任何專案中都能快速套用一致的動畫風格，維護起來也更方便。隨著專案增長，持續擴充這個函式庫，逐步建立屬於自己的動畫設計語言。精緻的微互動不需要很複雜，但需要用心。每一個細節——timing function 的選擇、中間關鍵幀的安排、效能的考量——都在累積使用者對產品品質的整體印象。