CSS モーションパス

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

モーションパス (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 プロパティ

BCD tables only load in the browser