モーションパス

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

基本的な例

<div id="motion-demo"></div>
#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%;
  }
}

リファレンス

プロパティ

仕様書

仕様書 状態 備考
Motion Path Module Level 1 草案 初回定義

ブラウザーの互換性

offset プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
offset-pathChrome 完全対応 55
完全対応 55
完全対応 46
代替名
代替名 非標準の名前 motion-path を使用しています。
Edge 未対応 なしFirefox 完全対応 72
完全対応 72
未対応 63 — 72
無効
無効 From version 63 until version 72 (exclusive): this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 45
完全対応 45
完全対応 32
代替名
代替名 非標準の名前 motion-path を使用しています。
Safari 未対応 なしWebView Android 完全対応 55
完全対応 55
完全対応 46
代替名
代替名 非標準の名前 motion-path を使用しています。
Chrome Android 完全対応 55
完全対応 55
完全対応 46
代替名
代替名 非標準の名前 motion-path を使用しています。
Firefox Android 完全対応 63
無効
完全対応 63
無効
無効 From version 63: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 32
代替名
代替名 非標準の名前 motion-path を使用しています。
Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 path() is the only value type supported.
完全対応 5.0
代替名
代替名 非標準の名前 motion-path を使用しています。
Supports the path() function as a valueChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 完全対応 63Opera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0
Supports the ray() function as a valueChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 71
無効
完全対応 71
無効
無効 From version 71: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。