值得導入的網站視覺效果整理

前端這兩年的演進有個明顯的方向：過去要靠 JavaScript 才能做的視覺效果，現在有愈來愈多變成純 CSS 就能處理。這不只是語法上的變化，而是整個開發思路的位移。

這篇文章不是把所有新技術列一遍給你看。重點是幫你判斷：哪些值得現在就導入，哪些再等半年。

CSS Scroll-driven Animations：不用 JS 的滾動動畫

這是 2024-2025 最值得關注的 CSS 新特性之一。animation-timeline: scroll() 讓你可以把 CSS 動畫的進度綁定在頁面滾動位置上，animation-timeline: view() 則是把動畫觸發綁在元素進入 viewport 的時機。

不需要 IntersectionObserver，不需要 GSAP，純 CSS 做出進場動畫。Chrome 115+ 全面支援，Firefox 也已跟上。Google 有一個專門的展示站 scroll-driven-animations.style，把所有可能的用法都做成互動展示，值得花一個小時瀏覽。如果你想看在 WordPress 環境裡怎麼做出固定滾動的 Pin Scroll 組合效果，可以參考這篇實作範例。

現在就能用。只要做漸進增強，舊瀏覽器靜態顯示，新瀏覽器有動畫，問題不大。

View Transitions API：頁面切換的流暢過渡

document.startViewTransition() 讓你在換頁或更新 DOM 的瞬間插入一個平滑的過渡動畫。原本要用 Framer Motion 搭配路由才能做到的效果，現在兩行 JS 就能處理。

效果最明顯的場景是：點選卡片展開詳頁、在 SPA 裡切換頁面。Astro 整個框架預設就是用 View Transitions 來處理路由切換，效果非常流暢。Chrome 111+、Safari 18+ 支援，Firefox 的開發版已在實作中。

可以用，但要查支援率。如果你的受眾大量使用 Firefox，目前要做降級處理。

Container Queries 與 :has()：元件思維的兩個基石

@container 讓元件依據父容器的寬度來改變排版，而不是依賴 viewport 的 media query。同一個卡片元件，放在側邊欄就顯示成窄版，放在主欄就顯示成寬版，元件本身知道自己的空間。Ahmad Shadeed 的 Container Query 完整指南是這個主題最清楚的資源，有大量互動範例。

:has() 是「父選擇器」，div:has(img) 選到包含圖片的 div，過去只能靠 JS 做到的邏輯現在純 CSS 就行。這兩個現在都能大規模用。主流瀏覽器全面支援，沒有理由不導入。

GSAP + Lenis：JS 動畫的主流組合

如果你需要更複雜的動畫效果，純 CSS 目前還不夠。GSAP ScrollTrigger 是業界最成熟的滾動觸發動畫方案，配合 Lenis 做平滑滾動，這個組合在頂級機構網站幾乎是標配。

GSAP 的 Demos 頁面收錄了大量展示範例，每個都可以直接在 CodePen 上檢視原始碼。如果你在 WordPress 上想做類似的長文批次捲動動畫效果，Greenshift 內建的 Batch Animation 是不需要額外寫 JS 的替代方案。想要快速套上有質感的動態背景？Vanta.js 作為背景是成本低、效果好的選項。

現在就能用，但要評估是否真的需要。不要為了用 GSAP 而用，先問自己純 CSS 能不能解決。

Liquid Glass 與 Glassmorphism 2.0：視覺風格的復回

Apple 在 2025 年把 Liquid Glass 作為設計語言推出後，frosted-glass 風格在 Web 端又重新活躍。現在的做法更克制：只在特定的 UI 層用 backdrop-filter，配合內側 border 和 highlight，製造輕微的折射感。可以用，但要克制。不要把整個頁面都做成玻璃，選一到兩個關鍵 UI 元素就夠。

Bento Grid：取代等距三欄的版面主流

SaaS 行銷頁的版面語言正在改變。非對稱的 tile 排列讓頁面節奏更有層次感，Apple 在 iPhone 產品頁的使用讓這個版面風格被廣泛認識。實作上是 CSS Grid 配合不等欄寬的 grid-column: span N，這不只是版面問題，它要求每個 tile 有自己的內容策略。現在就能用，但要準備足夠的內容填充。

實用程度總覽

前端的視覺可能性在 2025 年確實擴大了，但擴大的方向不是「技術更複雜」，而是「更多東西可以用更少的程式碼做到」。把這個方向記住，比追著技術名詞跑更有用。