モーションパス

パスはoffset-pathで指定し、通常はSVGのパス構文を使う。経路上の位置はoffset-distanceで、パーセンテージで表す。これを0から100までアニメーションさせれば要素は曲線に沿って滑るように動き、offset-rotate: autoを加えれば進行方向を向く。飛行機を動かすのと、操縦するのとの違いである。パスには、角度と長さを指定するray()、基本図形、SVGドキュメント内のパスへの参照も使える。以前は、毎フレーム位置を計算し直すJavaScriptライブラリか、SVGの内部でしか動かないanimateMotionが必要だった。2022年以降は広くサポートされている。