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 プロパティ

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
offset-path
<basic-shape>
border-box
content-box
fill-box
margin-box
Experimental
none
padding-box
Support for path() function as a value
Support for ray() function as a value
stroke-box
<url>
view-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Uses a non-standard name.
Has more compatibility info.