二〇二六年 CSS linear() 緩動：靜態 HTML 關鍵影格、過場與 Safari WebKit 真機排演

行銷落地頁仍常複製十年前的 cubic-bezier 四元組，結果在 Safari 上顯得「黏滯」，在 Chrome 卻尚可接受。linear() 以百分比節點描述輸出進度，能把多段折線式減速寫進 animation-timing-function 與 transition-timing-function，不必再串三組關鍵影格或額外 JavaScript 彈簧。二〇二六年若要在靜態 HTML維持小封包，同時又要對齊捲動驅動時間軸、prefers-reduced-motion 與 WebKit 合成器排程，就必須把緩動視為可及性的一部分：曲線再漂亮，若讓使用者眩暈也沒有意義。

建議搭配站內已上架的 捲動驅動動畫與 固定導覽列與錨點捲動邊距，讓捲動區間與導覽高度不會讓動態「超車」。

語法重溫與節點間距

每個節點由「輸出進度＋輸入百分比」組成；重複百分比會形成尖角，若要柔順的 ease-out，通常需要至少三個內部節點。實務上把總節點數控制在五到九個之間：超過這個數量，DevTools 圖表難以閱讀，設計師也無法在程式碼審查中比對差異。

.hero-card {
  transition: transform 420ms
    linear(0, 0.12 8%, 0.32 24%, 0.87 68%, 1);
}

請確認最後一個節點在輸入 100% 時到達 1；若曲線提前「貼頂」，最後幾個像素會出現肉眼可見的瞬移，卻不一定有對應的關鍵影格可追。

linear() 與 cubic-bezier 何時取捨

需求	cubic-bezier	linear()	備註
單段柔和過場	極佳	過度設計	維持經典曲線即可。
多段行銷回彈	彆扭	自然	以節點明確描述回彈。
捲動同步節奏	僵硬	彈性	輸入軸對齊捲動百分比。

與捲動時間軸耦合

當 animation-timeline 綁定具名捲動時間軸時，緩動的輸入軸是捲動進度而非牆鐘時間。若曲線中段斜率過陡，使用者會感覺「加速兩次」：一次來自捲動速度，一次來自曲線本身。當捲動區間短於400px 時，應刻意压低中段斜率，避免 hero 區塊在小幅捲動內就完成整段動態。

減少動態效果的策略

在 @media (prefers-reduced-motion: reduce) 內，建議把透明度相關過場壓在120 毫秒內，或對位移類動態改為 linear(0, 1) 的接近即時完成。僅依賴系統開關仍不足：部分使用者開啟動態卻同時開著 Safari 低耗電模式，影格會合併，導致細緻的閃爍像錯誤。請在低耗電情境下目視確認。

@supports 與回退

先寫好 cubic-bezier 基底，再以功能偵測覆寫：

@supports (animation-timing-function: linear(0, 1)) {
  .hero-card { animation-timing-function: linear(0, 0.2 15%, 1); }
}

兩段宣告需維持穩定的層叠順序，避免壓縮工具在重排時把順序打亂。

Safari WebKit 排演清單

1. 若硬體支援，以120 fps 錄影並檢查微卡頓。
2. 在 macOS「輔助使用」開啟減少動態效果後強制重新載入。
3. 在筆電電池模式啟用低耗電模式重播相同頁面。
4. 比對 Safari Technology Preview 與正式版在合成層上的差異。

合成層與掉幀紀律

僅動畫 transform 與 opacity 通常可留在合成層；若把 filter 模糊與 linear() 同時套在大量元素上，舊 GPU 可能退回主執行緒混合。若行銷堅持模糊進場，請把同畫面同時模糊的元件限制在兩個，並以40 毫秒 交錯起始時間。

長篇靜態頁若已採用內容可見性（content-visibility）等最佳化，請確保捲動連動動畫不會在字型延遲載入時觸發版面抖動。

設計交付：把曲線轉成 linear()

設計工具輸出的是貝茲控制點，不是節點清單。請設計師提供 0–100% 時間為橫軸、緩動輸出為縱軸的標準化圖表，再由前端以「品牌彈跳點」「落穩點」為錨，補齊中間節點，直到最壞寬度下位移誤差低於一個 CSS 像素。把核准後的字串寫進元件庫 README 並標註日期，避免日後美化程式碼時悄悄換曲線。

每年排一次動態稽核：用舊版螢幕錄影對照新版，字型行高微調也會改變主觀「順暢感」，即使 linear() 數值未改。

斷點矩陣與容器查詢

在1440px 寬看起來俐落的曲線，換到390px 手機可能顯得拖沓，因為相同百分比對應的像素位移較少。建議以容器查詢在約720px 附近切換 --ease-hero-wide 與 --ease-hero-narrow 兩組權杖，並在靜態產生器中鎖定翻譯流程不得刪除其中一支。

will-change 使用紀律

到處標註 will-change: transform 會在舊款 MacBook Air 上耗盡 GPU 分塊記憶體。同畫面同時保留的提示不宜超過三個，動畫結束後應在 animationend 移除提示。linear() 已能精準控制節奏時，更應避免無意義的合成層升級。

低數據模式與動態耦合

iOS Safari 的低數據模式下，使用者可能仍想要輕量動態，但無法承擔大型 LCP 影片交疊淡入。可準備第三組權杖：縮短位移距離、移除模糊，並沿用相同節點結構只調整輸出值。請在文件註明哪些素材會切換，以免對比度在切換後不合格。

常見問題

linear() 會取代 cubic-bezier 嗎？

不會；單段柔和曲線仍以 cubic-bezier 為預設首選。

捲動驅動動畫可用 linear() 嗎？

可以，但務必限制捲動區間並實測合成層。

prefers-reduced-motion 怎麼做？

縮短時間或移除空間位移。

節點數量建議？

維持五到九個節點以利維運。

緩動是主觀體驗：設計師在 Mac 上簽核，你的 CI 截圖卻可能在 Linux 無頭環境產生。租一台搭載 Apple Silicon 的Mac mini，才能忠實重現 Safari 影格節奏、P3 伽瑪與夜覽色溫對「順暢感」的影響。以 MacHTML 雲端主機約每天 16.9 美元計價，可在上線週保持 QA 機器線上，錄製並排影片，驗畢即關機，不必再為會議桌下多一台吃灰主機編列資本支出。

彈性租賃也適合同時維護多家靜態客戶的代理商：以不同 macOS 使用者設定檔隔離字型快取與預覽埠，避免彼此污染。