跳轉到

建立 2026-09-14 更新 2026-09-14

SVG 動畫

優先用 CSS。SMIL（<animate>）仍能用，但工具鏈與除錯都不如 CSS 直覺。要跟捲動或資料綁定再上 JavaScript。

描邊展開（最常用）

先量路徑長度，再用 stroke-dasharray 與 stroke-dashoffset 讓線「自己長出來」：

.draw {
  fill: none;
  stroke: #4051b5;
  stroke-width: 4;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 1.2s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

長度可用開發者工具或 path.getTotalLength()。圖示載入、簽名、流程線都是這招。

hover 與 keyframes

.icon { transition: transform 0.25s ease; }
.icon:hover { transform: scale(1.08); }

@keyframes pulse {
  50% { transform: scale(1.06); }
}
.badge { animation: pulse 2s ease-in-out infinite; }

循環動畫請提供暫停，並尊重減少動態：

@media (prefers-reduced-motion: reduce) {
  .draw, .badge { animation: none; }
}

何時用 JavaScript

  • 捲動驅動的 startOffset（textPath）
  • 資料進來才決定路徑（圖表）
  • 多段時間軸要對台詞或步驟

選元素與改屬性和 HTML 相同：

const path = document.querySelector("#curve");
path.style.strokeDasharray = path.getTotalLength();

函式庫（Snap.svg、GSAP、anime.js）能省時間，但本站範例不依賴它們。

SMIL

<animate> / <animateTransform> 在現代 Chromium、Firefox、Safari 仍可用，不過社群與新教材多改走 CSS。維護舊檔時看得懂即可，新作優先 CSS。

進一步學習