比較網頁上的動畫選項

動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。

而且，您有很多不同且具有不同目的的選擇。

CSS 通常被認為更加高效，儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼，以及每幀渲染所需的時間。

讓我們總結這些選項，找出哪一種是合適的選擇。

CSS 過渡效果

CSS 過渡效果有一個起點和終點。它們將一點從 X 移動到 Y，或從可見變為不可見。

它是最簡單的動畫，主要用於與頁面其餘部分無縫集成的微妙動畫。

通過過渡效果，您可以從一個狀態轉換到另一個狀態，但您無法做更多。

與 CSS 過渡效果相比，CSS 動畫允許您具有不止 2 個狀態，事實上，您可以擁有很多狀態，並且可以用於創建更複雜的動畫。

當您需要相對簡單且無法使用過渡效果實現的動畫時，建議使用 CSS 動畫。

SVG 是一種出色的基於矢量的格式，可以使用 SMIL（SVG 動畫的”本地”格式）創建動畫。

由於存在跨瀏覽器的不一致性（並且 IE/Edge 不支援），SMIL 快將在 Chrome 中廢棄，但是團隊已暫時撤銷了此決定。

他們希望推動 CSS 動畫和 Web Animations API 來代替 SMIL。

Canvas API 提供了一種在屏幕上繪製的方法，使用的是點陣而不是向量。

儘管動畫是可能的，但不如其他選項高效。

Web Animations API 是 Web 上的動畫未來。它旨在將 CSS 動畫的性能與使用 JavaScript 輕鬆創建較長動畫的能力結合起來。

目前只在 Chrome 和 Firefox 上運行。Safari、IE 和 Edge 仍在考慮中，但存在一個 polyfill 可以使其在所有瀏覽器中運行。

WebGL 允許您創建 3D 動畫，更適合沉浸式全屏動畫體驗和 VR，但複雜性更高。

除了原生 API 外，還有一些很棒的庫可以為您抽象出大部分細節：

tags: [“animation”, “CSS”, “JavaScript”, “SVG”, “Canvas”, “Web Animations API”, “WebGL”]