CSS モーションパス

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

モーションパス (Motion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。

この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 offset-path によって、任意の形状の特定の経路を定義することができます。そして、 offset-distance により経路に沿って動かすことができ、 offset-rotate を用いて任意の位置での向きを選択することができます。

基本的な例

html
<div id="motion-demo"></div>
css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

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

リファレンス

プロパティ

仕様書

Specification
Motion Path Module Level 1
# offset-path-property

ブラウザーの互換性

offset プロパティ

BCD tables only load in the browser