Motion Path
モーションパス
どんな動き？
円やアイコンなどの小さな図形が、あらかじめ描かれたSVGパスに沿って滑らかに移動し続けるアニメーション。CSSのoffset-pathを使うことで曲線的な軌道を表現でき、装飾的なローディングインジケーターや案内線、遊び心のあるUIアクセントとして使われる。
よく使う場所
ローディングインジケーター装飾アニメーション案内線アイキャッチ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Move a small shape continuously along a curved SVG path.Trigger:
Continuous, starts automatically and loops.
Initial state:
offset-distance: 0% (shape at the start of the path)
Animation:
The shape travels along the path as offset-distance increases, following the path's curvature and rotation.
Final state:
offset-distance: 100% (shape at the end of the path), then reverses or loops back.
Timing:
duration: 3s per pass
easing: ease-in-out
iteration: infinite, alternate実装方法の候補
この動きは以下の技術で実装できます。
CSS (offset-path)GSAP MotionPathPluginSVG SMIL (animateMotion)
別名・関連ワード
Path AnimationMotion Along Path