Skip to content

Instantly share code, notes, and snippets.

百萬種動的方式 - Part 2:選擇動畫技術

在 web 上實現動畫的方式約有這幾種:原生的有 CSS 動畫SVG 動畫Canvas,加上以 CSS 或 SVG 為操作對象的 web animation API。 再進一步,動畫函式庫如 GSAP 或 Pixi 等,能更省力並提升動畫表現的境界。不一定哪一種比較厲害,純粹是看專案的情境和所需的效果,2020 年度回顧就是混和多種技術而成。

CSS(DOM) 動畫

使用情境

  • 循環動畫,沒有太多依時間進程的變化
  • 需要依附在 CSS class 動作
  • 同一套動畫套用在其他元素上也不會怪