Widely available 安心して使用可能。主要ブラウザで広くサポートされている。

Motion path (offset-path)

offset は CSS の一括指定プロパティで、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。 定義されたパスに沿って要素をアニメーションするために必要なすべてのプロパティを設定します。 offset プロパティは、オフセット変換を定義するのに役立ちます。これは、座標変換であり、 要素内の点 (offset-anchor) を、パス (offset-path) 上のさまざまな点 (offset-distance) にあるオフセット位置 (offset-position) に配置し、またオプションで、パスの方向に従うように要素を回転 (offset-rotate) することもできます。

メモ: 仕様書の早期の版では、このプロパティを motion と呼んでいました。

アニメーションパス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
offset
55
79
72
16
55
16
その他
css.properties.offset-anchor

offset-anchor は CSS のプロパティで、 offset-path に沿って実際に移動している要素のボックス内の点を指定します。
116
116
72
16
116
16
CSS プロパティ
auto
116
116
72
16
116
16
bottom
116
116
72
16
116
16
center
116
116
72
16
116
16
left
116
116
72
16
116
16
right
116
116
72
16
116
16
top
116
116
72
16
116
16
その他
css.properties.offset-distance

offset-distance は CSS プロパティで、 offset-path 上の要素を配置する位置を指定します。
55
79
72
16
55
16
css.properties.offset-path

offset-path は CSS のプロパティで、要素がたどる経路（パス）を指定し、そのパス内の親コンテナーまたは SVG 座標系における要素の位置を決定します。パスは、要素が位置指定または移動される直線、曲線、または幾何学的形状です。
55
79
72
15.4
55
15.4
CSS プロパティ
basic shape

`<基本形状>`
116
116
122
18
116
18
border-box
116
116
122
18
116
18
content-box
116
116
122
18
116
18
fill-box
116
116
122
18
116
18
margin-box
実験的
18
18
none
80
80
72
18
80
18
padding-box
116
116
122
18
116
18
path

値としての「path()」関数のサポート
64
79
72
16
64
16
ray

値としての「ray()」関数のサポート
116
116
122
16
116
16
stroke-box
116
116
122
18
116
18
url

`<URL>`
116
116
122
17
116
17
view-box
116
116
122
18
116
18
その他
css.properties.offset-position

offset-position は CSS のプロパティで、パスに沿った要素の初期位置を定義します。このプロパティは通常、 offset-path プロパティと組み合わせて、動きの効果を作成するために使用されます。 offset-position の値は、 basic-shape/path などの offset-path 関数が独自の開始位置を指定していない場合、オフセットパスに沿って移動するための要素の初期配置位置を決定します。
116
116
122
16
116
16
CSS プロパティ
auto
116
116
122
16
116
16
bottom
116
116
122
16
116
16
center
116
116
122
16
116
16
left
116
116
122
16
116
16
normal
116
116
122
17.2
116
17.2
right
116
116
122
16
116
16
top
116
116
122
16
116
16
その他
css.properties.offset-rotate

offset-rotate は CSS のプロパティで、要素が offset-path に沿って配置された場合の向き/方向を定義します。
56
79
72
16
56
16
CSS プロパティ
auto
46
79
72
16
46
16
reverse
46
79
72
16
46
16
その他
css.types.ray

ray() は CSS 関数で、アニメーションする要素がたどることができる offset-path の線分を定義します。この線分は「光線」と呼ばれます。光線は offset-position から始まり、指定された角度の方向に伸びます。光線の長さは、サイズを指定し、 contain キーワードを使用することで制約することができます。
116
116
122
16
116
16
CSS タイプ
position

`<位置>で`
116
116
122
17.2
116
17.2
size

`<サイズ>`
116
116
122
17
116
17
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion (46)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion (46)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion-distance (46)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion-distance (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion-distance (46)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion-path (46)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion-path (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: motion-path (46)
注釈 2件
対応条件
  • 以前は別名で対応していました: offset-rotation (55)
  • 以前は別名で対応していました: motion-rotation (46)
注釈 2件
対応条件
  • 以前は別名で対応していました: offset-rotation (79)
  • 以前は別名で対応していました: motion-rotation (79)
注釈 2件
対応条件
  • 以前は別名で対応していました: offset-rotation (55)
  • 以前は別名で対応していました: motion-rotation (46)

基本構文

CSS 
.airplane {
  offset-path: path("M 0 200 Q 150 0 300 200 T 600 200");
  offset-rotate: auto;
  animation: fly 3s ease-in-out infinite;
}

@keyframes fly {
  to {
    offset-distance: 100%;
  }
}

ライブデモ

curvelinepathmove

Motion path (offset-path) curvelinepathmove demo.

プレビュー全画面表示

Circleshapepath

Motion path (offset-path) Circleshapepath demo.

プレビュー全画面表示

straight-line path

Motion path (offset-path) straight-line path demo.

プレビュー全画面表示

実務での使いどころ

  • 曲線上のアニメーション

    要素をベジェ曲線や円弧など自由な軌道に沿って移動させる。

注意点

  • 複雑なパスはパフォーマンスに影響する場合がある。シンプルなパスを推奨。

アクセシビリティ

  • 動きの大きいモーションパスアニメーションは prefers-reduced-motion で無効化する。

参考リンク