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 的選擇、中間關鍵幀的安排、效能的考量——都在累積使用者對產品品質的整體印象。
繼續閱讀
After Effects 2026 新功能完整介紹:向量工作流與 3D Substance 材質
After Effects 2026 帶來了哪些新功能?向量工作流升級、免費 3D 材質庫、可變字體動畫——一次看完所有更新。
相關文章
After Effects 2026 新功能完整介紹:向量工作流與 3D Substance 材質
After Effects 2026 帶來了哪些新功能?向量工作流升級、免費 3D 材質庫、可變字體動畫——一次看完所有更新。
After Effects Shape Layer 動畫教學:用形狀圖層打造專業 MG 動態設計
想做出那種流暢又有質感的 Motion Graphics 動畫嗎?Shape Layer 是 After Effects 裡最強大也最被低估的功能之一。這篇教學帶你從零開始,用形狀圖層打造專業級的 MG 動態設計。
你可能也喜歡
探索其他領域的精選好文