CSSアニメーションで円をパスに沿って動かす！ offset-distanceとSVGの比較

このプロパティは、要素がパス上のどの位置に配置されるかを決定するオフセット距離を指定します。値は、長さ（px、cmなど）またはパーセンテージで指定できます。

長さの場合、オフセットは絶対的な値として解釈されます。一方、パーセンテージの場合、オフセットはパスの長さに対する相対的な値として解釈されます。

offset-distance を理解するには、offset-path プロパティについても基本的な知識が必要です。offset-path は、要素がアニメーションする際に移動するパスを定義します。パスは、SVG パス文字列、URL で参照される画像、または要素が配置されているコンテナーの境界線など、さまざまな方法で定義できます。

例

次の例では、赤い円を円形パスに沿ってアニメーションさせます。円は、パスの最初の 25% の位置から開始し、アニメーションが完了するまでにパスを一周します。

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  animation: move 2s linear infinite;
}

@keyframes move {
  0% {
    offset-path: none;
  }
  100% {
    offset-path: path("M 0 0 A 50 50 0 0 1 100 0 A 50 50 0 0 0 0 0");
    offset-distance: 100%;
  }
}

この例では、offset-distance プロパティは 100% に設定されています。これは、円がパスの最後まで移動することを意味します。アニメーション速度とタイミング関数は、animation キーフレームで定義されています。

offset-distance は、さまざまなアニメーション効果を作成するために使用できる強力なプロパティです。創造性を発揮して、独自のアニメーションを作成してみてください。

offset-distance は、すべての主要なブラウザでサポートされていますが、古いブラウザではサポートされていない場合があります。

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  animation: move 2s linear infinite;
}

@keyframes move {
  0% {
    offset-path: none;
  }
  100% {
    offset-path: path("M 0 0 A 50 50 0 0 1 100 0 A 50 50 0 0 0 0 0");
    offset-distance: 100%;
  }
}

波形パスに沿って要素をアニメーションさせる

この例では、青い四角形を波形パスに沿ってアニメーションさせます。四角形は、パスの最初の 0% の位置から開始し、アニメーションが完了するまでにパスを 2 回繰り返します。

.square {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  animation: wave 2s linear infinite;
}

@keyframes wave {
  0% {
    offset-path: path("M 0 0 q 50 50 100 0 q 50 -50 100 0");
    offset-distance: 0%;
  }
  100% {
    offset-path: path("M 0 0 q 50 50 100 0 q 50 -50 100 0");
    offset-distance: 200%;
  }
}

星形パスに沿って要素を回転させる

この例では、黄色の星形を星形パスに沿って回転させます。星形は、パスの最初の 0% の位置から開始し、アニメーションが完了するまでにパスを 1 回回転します。

.star {
  width: 50px;
  height: 50px;
  background-color: yellow;
  position: absolute;
  animation: spin 2s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes spin {
  0% {
    offset-path: path("M 0 50 L 16.33 33.67 L 50 0 L 83.67 33.67 L 100 50 L 83.67 66.33 L 50 100 L 16.33 66.33 L 0 50");
    offset-distance: 0%;
    transform-rotate: 0deg;
  }
  100% {
    offset-path: path("M 0 50 L 16.33 33.67 L 50 0 L 83.67 33.67 L 100 50 L 83.67 66.33 L 50 100 L 16.33 66.33 L 0 50");
    offset-distance: 100%;
    transform-rotate: 360deg;
  }
}

offset-distance の代替方法として、以下の方法が考えられます。

SVG アニメーション

SVG アニメーションを使用すれば、offset-distance と同様の効果をより汎用的に実現できます。SVG はベクターグラフィック形式であり、アニメーションパスを定義するために使用できます。

SVG アニメーションの利点は以下の通りです。

複雑なアニメーションを作成しやすい
offset-distance よりも柔軟性と制御性に優れている
すべての主要なブラウザでサポートされている

欠点としては、SVG アニメーションを記述するのに offset-distance よりも専門知識が必要となることです。

例

以下の例は、SVG アニメーションを使用して赤い円を円形パスに沿ってアニメーションさせるものです。

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="25" fill="red">
    <animateMotion path="M 0 50 A 50 50 0 0 1 100 50 A 50 50 0 0 0 50 50" dur="2s" repeatCount="indefinite"></animateMotion>
  </circle>
</svg>

GSAP (GreenSock Animation Platform)

GSAP は、JavaScript ベースのアニメーションライブラリであり、offset-distance を含むさまざまな CSS プロパティをアニメーションさせるために使用できます。

GSAP の利点は以下の通りです。

パフォーマンスが優れている
高度なアニメーションを作成しやすい
offset-distance を含むさまざまな CSS プロパティをアニメーションさせることができる

欠点としては、GSAP を使用する前にライブラリをダウンロードして読み込む必要があることです。

例

以下の例は、GSAP を使用して赤い円を円形パスに沿ってアニメーションさせるものです。

<div id="circle" style="width: 50px; height: 50px; background-color: red; position: absolute;"></div>

<script>
  const circle = document.getElementById('circle');

  const tl = new TimelineLite();

  tl.add(
    GSAP.to(circle, 2, {
      motionPath: {
        path: "M 0 50 A 50 50 0 0 1 100 50 A 50 50 0 0 0 50 50",
        strokelength: 100,
      },
      repeat: -1,
    })
  );
</script>

Anime.js

Anime.js は、もう 1 つの JavaScript ベースのアニメーションライブラリであり、offset-distance を含むさまざまな CSS プロパティをアニメーションさせるために使用できます。

Anime.js の利点は以下の通りです。

パフォーマンスが優れている
さまざまなアニメーションを作成しやすい
軽量で使いやすい

欠点としては、GSAP ほど多くの機能を持っていないことです。

例

以下の例は、Anime.js を使用して赤い円を円形パスに沿ってアニメーションさせるものです。

<div id="circle" style="width: 50px; height: 50px; background-color: red; position: absolute;"></div>

<script>
  const circle = document.getElementById('circle');

  anime({
    targets: circle,
    path: "M 0 50 A 50 50 0 0 1 100 50 A 50 50 0 0 0 50 50",
    duration: 2000,
    easing: 'linear',
    repeatCount: 'indefinite',
  });
</script>

CSS キーフレームアニメーション

シンプルなアニメーションの場合は、CSS キーフレームアニメーションを使用して offset-distance の代替手段とすることができます。

CSS キーフレームアニメーションの利点は以下の通りです。

軽量でパフォーマンスが優れている
コードがシンプルでわかりやすい