CSS 運動路徑

CSS 運動路徑模組允許開發者沿著自定義路徑為任何圖形物件製作動畫。

CSS 變換模組提供了在不干擾頁面上任何其他元素佈局的情況下，重新定位、旋轉、縮放和傾斜框的功能。這些變換可以進行動畫和過渡，但方式相對基本。

CSS 運動路徑模組的功能提供了偏移變換：使元素上的一個點與沿偏移路徑的偏移距離對齊的變換，並可選擇旋轉變換後的元素以跟隨路徑方向。這個模組提供了強大的變換可能性，例如：

使用極座標進行定位，而不是將變換限制在標準的矩形 transform 函式座標。
沿著定義的路徑為元素製作動畫。

CSS 運動路徑允許利用 CSS 形狀函式來定義複雜的 2D 空間過渡。

例如，你可以使用 offset-path 屬性定義任何你想要的特定形狀路徑。然後，透過為 offset-distance 屬性製作動畫，使元素沿該路徑移動，並使用 offset-rotate 屬性在任何點旋轉它。

運動路徑的實際應用

<div id="heart">
  <div id="motion-demo"></div>
</div>

#motion-demo {
  offset-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
  animation: move 3000ms infinite linear;
  width: 10px;
  height: 10px;
  background: red;
}

#heart {
  width: 200px;
  height: 200px;
  background-color: lightpink;
  clip-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

在這個例子中，我們使用 CSS 遮罩和 CSS 形狀將一個淺粉色背景的容器剪裁成心形。我們使用了一個 path() 函式作為 clip-path 屬性的值。它的子元素是一個 10px x 10px 的紅色方框，它會沿著其父元素的邊緣移動。我們透過使用相同的 <basic-shape> 作為路徑，並將方框的 offset-path 屬性設定為相同的 path() 函式值來實現這一點。我們使用 CSS 動畫在三秒內將 offset-distance 從 0% 更改為 100%。