重點整理
- CSS 新增 animation-trigger，無需 JavaScript 即可實現滾動觸發動畫。
- 滾動觸發是狀態啟動，滾動驅動則與滾動位置直接綁定，兩者邏輯不同。
- 此屬性目前為實驗性功能，僅支援 Chrome 145 以上版本，正式上線需留意。
當您滑動網頁時，看到圖片或文字優雅地淡入，是不是覺得網站變得更有質感？過去要實現這種「滾動觸發動畫」，通常需要工程師撰寫複雜的 JavaScript 程式碼。但現在，CSS（控制網頁外觀與樣式的程式語言）推出了一個實驗性的新屬性 animation-trigger，讓網頁互動效果的實作變得更簡單。這篇文章將帶您了解這個新技術，以及它對未來網站製作的影響。
什麼是 animation-trigger？告別繁瑣的 JavaScript
簡單來說，animation-trigger 是一個可以「延遲動畫開始」的 CSS 屬性。它可以監聽特定的觸發條件，當條件滿足時，才控制動畫要播放、暫停或重置。
過去，要偵測網頁元素是否進入使用者的螢幕畫面，通常必須依賴 JavaScript 的 Intersection Observer API（一種用來偵測網頁元素是否進入可見範圍的技術）。現在，透過 animation-trigger，我們可以直接在 CSS 中定義觸發名稱與動作（例如 play-forwards 順向播放、pause 暫停），大幅簡化了程式碼的撰寫與後續維護。
更棒的是，觸發條件與動畫效果可以設定在不同的元素上。例如，當父元素進入畫面時，可以同時觸發多個子元素的動畫，讓網頁排版與互動設計更有彈性。
滾動觸發與滾動驅動的差異
在了解新屬性時，有兩個容易混淆的名詞：「滾動觸發 (Scroll-Triggered)」與「滾動驅動 (Scroll-Driven)」。雖然它們都跟網頁滾動有關，但背後的邏輯完全不同：
- 滾動驅動 (Scroll-Driven)：動畫的進度與使用者的滾動位置直接綁定。您往下滑，動畫就往前跑；往上滑，動畫就倒退。它沒有所謂的「開始」瞬間，而是隨著滾動連續變化。
- 滾動觸發 (Scroll-Triggered)：這是一種基於「狀態」的機制。當元素進入設定的畫面範圍時，觸發器就會啟動（例如開始播放動畫）。一旦觸發後，動畫就會像一般的 CSS 動畫一樣獨立運行，不再跟隨滾動進度而改變。
透過 animation-trigger，我們現在可以更輕鬆地在 CSS 中實現「滾動觸發」的效果，讓網頁元素在適當的時機點自動播放動畫，而不需要一直跟著使用者的滾動條移動。
瀏覽器支援度與注意事項
雖然這個新功能看起來很強大，但必須注意的是，animation-trigger 目前仍處於「實驗性 (Experimental)」階段，相關的 CSS 規範還在草案編輯中，未來內容可能會有所調整。
在瀏覽器支援度方面，目前僅有 Chrome 145 以上的版本支援。這意味著，如果您的網站訪客使用的是其他瀏覽器或較舊的版本，可能無法看到這些動畫效果。因此，在正式上線的商業網站中，必須謹慎評估並提供備案。
崴米的建議
面對網頁技術的不斷演進，崴米設計為各位企業主與行銷人員整理以下建議：
- 規劃互動時，先聚焦於「體驗」而非「技術」：在發想網站設計時，可以先思考希望使用者在滾動時看到什麼效果（例如圖片淡入或文字滑入），再與設計及工程團隊討論最適合的實作方式，不必受限於特定技術。
- 評估新技術的相容性風險：像
animation-trigger這類實驗性功能，雖然能簡化程式碼，但目前瀏覽器支援度有限。若您的網站需要確保所有顧客都能有一致的瀏覽體驗，建議優先使用成熟的技術方案。 - 保持對網頁新標準的關注：CSS 原生支援越來越多的互動效果，這意味著未來的網站維護成本有望降低。建議企業主可定期了解網頁技術趨勢，在網站改版時，將這些新標準納入評估，以打造更輕量、高效的網站。
參考來源：animation-trigger
