CSS モーションパス

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

CSS 座標変換モジュールは、ページ上の他の要素のレイアウトを崩すことなく、ボックスの配置位置を基準として、ボックスの位置を再配置したり、回転させたり、変倍したり、歪ませたりする機能を提供します。これらの座標変換にはアニメーションやトランジションを適用できますが、その方法は比較的基本的なものに限定されます。

CSSのモーションパスモジュールの機能には、オフセット変換が含まれています。これは、要素上の特定の点を、オフセットパスに沿って指定された距離だけずらして配置する変換であり、必要に応じて、変換後の要素をパスの方向に合わせて回転させることもできます。このモジュールにより、次のような強力な変換ができます。例えば、

座標変換を標準の直交座標系の transform 座標に制限するのではなく、極座標系をを用いて位置指定を行う。
定義されたパスに沿って要素をアニメーションさせる。

CSS モーションパスでは、CSS 図形関数を活用することで、複雑な 2D トランジションを定義することができます。

例えば、 offset-path によって、任意の形状の特定の経路を定義することができます。そして、 offset-distance により経路に沿って動かすことができ、 offset-rotate プロパティを用いて任意の位置での向きを選択することができます。

モーションパスの実例

<div id="heart">
  <div id="motion-demo"></div>
</div>

#motion-demo {
  offset-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
  animation: move 3000ms infinite linear;
  width: 10px;
  height: 10px;
  background: red;
}

#heart {
  width: 200px;
  height: 200px;
  background-color: lightpink;
  clip-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
}

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

この例では、CSS マスクとCSS シェイプを使用して、薄いピンクの背景を持つコンテナーをハートの形に切り抜いています。path() 関数を、clip-path プロパティの値として使用しています。その子要素は、親要素の縁に沿うように作成された 10px × 10px の赤いボックスです。これを実現するために、パスとして同じ <basic-shape> を使用し、ボックスの offset-path プロパティを同じ path() 関数の値に設定しています。また、CSS アニメーションを使用し、3 秒かけて offset-distance を 0% から 100% へと変化させています。