Widely available 安心して使用可能。主要ブラウザで広くサポートされている。
アニメーション Widely available

Motion path (offset-path)

offset-path にSVGパスや図形を指定し、offset-distance をアニメーションすることで要素を曲線上に動かせる。従来はJSやSMILで行っていた複雑な軌道のアニメーションがCSSだけで実現可能に。offset-rotate で進行方向への自動回転も制御できる。

アニメーションパス

概要

offset-path にSVGパスや図形を指定し、offset-distance をアニメーションすることで要素を曲線上に動かせる。従来はJSやSMILで行っていた複雑な軌道のアニメーションがCSSだけで実現可能に。offset-rotate で進行方向への自動回転も制御できる。

対応ブラウザ

デスクトップ

Chrome 55+
Edge 79+
Safari 16+
Firefox 72+

モバイル

Chrome Android 55+
Safari iOS 16+
Firefox Android 79+

基本構文

CSS 
.airplane {
  offset-path: path("M 0 200 Q 150 0 300 200 T 600 200");
  offset-rotate: auto;
  animation: fly 3s ease-in-out infinite;
}

@keyframes fly {
  to {
    offset-distance: 100%;
  }
}

実務での使いどころ

  • 曲線上のアニメーション

    要素をベジェ曲線や円弧など自由な軌道に沿って移動させる。

注意点

  • 複雑なパスはパフォーマンスに影響する場合がある。シンプルなパスを推奨。

アクセシビリティ

  • 動きの大きいモーションパスアニメーションは prefers-reduced-motion で無効化する。

参考リンク