#58 CSS offset-path：沿著軌跡行進動畫

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。

---

這篇我們會介紹如何使用 CSS 的 offset-path 屬性來創建路徑動畫。這個屬性允許元素沿著指定的路徑跑，配合 offset-distance 可以控制元素在路徑上的哪個位置。我們將透過一些範例來了解 offset-path 的用法。

基本概念

offset-path 用來定義一個元素應該沿著哪條路徑進行動畫效果。

這個屬性支援許多不同的形狀，包括：

• 圓 circle()

• 橢圓 ellipse()

• 矩形 inset()、rect()、xywh()

• 多邊形 polygon()

• 自訂 SVG 路徑 path()

• 外連 SVG 路徑 url('#id')

---

範例

以下我們簡單做幾個例子，搭配 @keyframes 和 animation，就可以讓元素不斷地在這些路徑上移動。

DEMO: CSS offset-path animations

還可以簡單做出一個沿著地球旋轉的月亮動畫…