如何在網頁中加入透明角色動畫：WebM Alpha 實戰

網頁透明動畫應該讓頁面本身的背景透出來。每一影格都固定帶著黑底、白底、綠幕或畫上去的棋盤格，無法得到這種效果。

這篇文章直接使用一份 AnimGen 匯出的 WebM Alpha，不用 GIF 模擬結果。你可以先開啟線上瀏覽器範例，也可以下載完整 HTML 範例包，拿同一組檔案去自己的目標瀏覽器測試。

先看實際效果，再複製程式碼

範例把同一個角色影片分別放到淺色面板、深色面板和漸變 Hero 區域上。用三種背景做對照，可以馬上確認背景是否真的透出來，也更容易發現只在某一種底色上暴露的邊緣問題。

本文使用的檔案實測資料如下：

我們使用 libvpx 解碼了全部 96 影格，解碼後的 Alpha 範圍是 0–255；隨後在 macOS 26.5.2 的 Chrome 152.0.7977.84 中開啟頁面，確認三個影片都能推進，而且透明像素下面的三種背景仍然可見。響應式頁面也在緊湊的 500 像素寬度下完成了檢查。

這些結論對應的是這份檔案和這次環境。“瀏覽器支援普通 WebM”並不等於“它一定會正確顯示 WebM Alpha”。MDN 目前的影片編碼指南明確提到 Safari 不支援 VP8／VP9 影片的 Alpha 透明度，因此應把目標瀏覽器當成產品要求來驗證，而不是猜測。

準備獨立的 WebM 和 PNG

把動畫和靜態降級圖當作兩個真實檔案儲存：

public/
└── animation/
    ├── character-run.webm
    └── character-run.png

PNG 應該是帶真實透明通道的一影格，而不是棋盤格截圖。下面就是範例使用的降級圖；部落格頁面上看到的棋盤格來自圖片檢視器，檔案裡沒有畫入背景。

不要把普通 MP4 當作透明降級格式。常規 MP4 和最初的模型預覽都是不透明影片；在 AnimGen 流程中，WebM Alpha、ProRes 4444、RGBA 影格和透明精靈資產是單獨產生的匯出結果。不同格式的用途見透明格式與播放相容性。

先用漸進增強的 HTML

預設展示 PNG。瀏覽器表示可以播放 VP8 WebM 後再顯示影片；媒體載入失敗時，再退回 PNG。

<div class="animation-stage">
  <img
    id="character-fallback"
    src="/animation/character-run.png"
    width="512"
    height="512"
    alt="正在跑步的藍色角色"
  />

  <video
    id="character-video"
    width="512"
    height="512"
    muted
    loop
    playsinline
    preload="metadata"
    poster="/animation/character-run.png"
    aria-label="正在跑步的藍色角色"
    hidden
  >
    <source
      src="/animation/character-run.webm"
      type='video/webm; codecs="vp8"'
    />
  </video>
</div>

明確寫出 width 和 height，可以在媒體載入前預留正確比例；playsinline 讓移動端儘量在頁面內播放，muted 讓裝飾性動畫保持靜音，preload="metadata" 則避免頁面一開啟就急著下載整段影片。MDN 的 <video> 元素說明記錄了這些屬性和 poster 的行為。

這裡有一個容易踩的坑：寫在 <video>...</video> 內部的文字或圖片，主要是給不認識 video 元素的瀏覽器準備的。現代瀏覽器如果認識 <video>，卻無法解碼你提供的所有 source，內部內容不一定會按預期出現。所以更實用的方案是把 PNG 作為相鄰的 <img>，再用錯誤事件切換。

用 CSS 把動畫放到頁面背景之上

透明像素會顯示 .animation-stage 自己的背景：

.animation-stage {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #7c3aed, #0891b2);
}

.animation-stage > img,
.animation-stage > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

如果完整角色畫布都要顯示，使用 object-fit: contain；只有確定要裁切時才使用 cover。在複雜的 Hero 背景上可以用 CSS drop-shadow() 增加分離度，但驗收原始邊緣時應先關掉特效，避免陰影掩蓋溢色或光邊。

在影片和降級圖之間安全切換

canPlayType() 可以幫助選擇初始路徑，但它只能說明瀏覽器對容器和編碼的判斷，不能證明 Alpha 一定會正確參與合成。

const video = document.querySelector("#character-video");
const fallback = document.querySelector("#character-fallback");
const playButton = document.querySelector("#play-character");

function showFallback() {
  video.pause();
  video.hidden = true;
  fallback.hidden = false;
}

const canPlayWebM = video.canPlayType(
  'video/webm; codecs="vp8"'
);

if (canPlayWebM) {
  fallback.hidden = true;
  video.hidden = false;
} else {
  showFallback();
}

video.addEventListener("error", showFallback);
playButton.addEventListener("click", () => video.play());

如果透明動畫位於關鍵 Hero 或引導流程，就要實測目標瀏覽器，並保留明確的應用級降級。若它只是裝飾，一張合適的 PNG 足以保持頁面佈局，不必讓影片相容問題擋住主要內容。

把播放權交給訪問者

透明影片仍然是動態內容。不要讓無限迴圈的裝飾動畫成為理解或使用頁面的唯一方式。

可下載範例預設停在 poster，並提供播放／暫停按鈕；同時檢查 prefers-reduced-motion。如果訪問者請求減少動態效果，頁面會繼續顯示 PNG，直到對方主動開始播放。

const reducedMotion = matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (reducedMotion) {
  showFallback();
}

如果場景確實需要自動播放，至少保持靜音和頁內播放，處理被瀏覽器拒絕的 play() Promise，並保留暫停入口。一段很短的動畫，也不應該因為迴圈而永久消耗 CPU 和網路。

控制網頁交付成本

這個示範同時播放三份影片，是為了在三種背景上證明透明效果。正式頁面通常只需要一個 video，而不是三個解碼器重複播放同一素材。

上線前可以按下面檢查：

1. 把片段裁到真正會展示的動作範圍。
2. 匯出尺寸接近網頁中的最大顯示尺寸，不要把超大原始檔塞進小卡片。
3. 首屏以下或必須主動觸發的媒體使用 preload="none"；需要提前知道尺寸和時長時再用 metadata。
4. 準備一張有代表性的透明 PNG poster。
5. 長時間播放的動畫在離開視口或標籤頁不可見時暫停。
6. 讓伺服器返回正確的 video/webm Content-Type，併為帶版本號的靜態檔案設定快取。
7. ProRes 4444 留給剪輯和合成，不作為常規網頁內嵌格式。

本文 4 秒範例約為 1.54 MiB，作為聚焦的展示小樣是可用的，但它不是所有網站都應照抄的預算。要把它與頁面其他資源一起放到限速行動網路中測量。

黑色矩形不一定要重新產生動作

透明動畫顯示成黑底時，先把“素材問題”和“播放問題”拆開：

1. 把配套 RGBA PNG 分別放到淺色與深色背景上。
2. PNG 正常透明、WebM 卻變黑時，檢查瀏覽器／解碼器、實際編碼和影片合成路徑。
3. 兩種檔案都不透明時，檢查來源圖 Alpha、匯出模式，以及原畫裡是否已經畫入背景。
4. 確認伺服器返回完整檔案和 Content-Type: video/webm。
5. 在產品真正使用的瀏覽器、系統、裝置或內嵌 WebView 中重測。

透明匯出排障文件還整理了光邊、溢色、模糊邊緣，以及“檔案帶 Alpha、播放器卻顯示錯誤”等情況。

先做動畫，再驗收最終網頁

使用 AnimGen 製作網頁素材時，可以從帶有效 Alpha 的 PNG 開始，選擇透明動畫模式，產生動作後裁出可用區間，再一起匯出 WebM Alpha 和一影格 PNG 作為降級圖。透明動畫完整流程說明了輸入與匯出的邊界；跑步與跳躍案例則覆蓋產生動作和交付前清理。

最後要驗收的是實際網頁元件，而不只是下載檔案：把它放到真實背景上，並檢查最小支援視口。你可以下載本文完整範例作為起點，也可以開啟 AnimGen 工作台，製作自己的透明角色動畫。