CSS モーションパス

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

この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 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%;
 }
}

[フレーム]