概要

offset-anchorプロパティは、CSSでアニメーションやモーションパスを設定する際に、要素のアンカー位置（基準点）を調整するためのプロパティです。このプロパティを使用することで、要素の動きの中心を柔軟に設定でき、アニメーションの動きをコントロールするのに非常に役立ちます。

構文

offset-anchor: <position> | <length> | <percentage>;

パラメータ

  • <position>
    キーワードを使ってアンカー位置を指定します。例えば、center、top、bottom、left、right などが使えます。
  • <length>
    ピクセル（px）や他の長さの単位（em、remなど）を使って位置を指定します。数値で位置を明確に設定できます。
  • <percentage>
    要素のサイズに対する割合で位置を指定します。例えば、50% 50%は要素の中心をアンカー位置とします。

戻り値

offset-anchorは指定された位置を基準に要素のアンカー位置を設定します。これにより、モーションパスやアニメーションの際に要素がどこを基準に動くかを制御できます。

説明

offset-anchorは、アニメーションで要素がどこを中心に動くかを決定するプロパティです。例えば、要素をモーションパスに沿って動かす際に、このプロパティを使ってアンカー位置を調整すると、より自然な動きを実現できます。アンカー位置を設定することで、要素の移動の基準点が変わり、アニメーションの見え方を大きく左右します。

主な特徴

  • モーションパスに沿ったアニメーションの際に、要素の動きの中心を細かく調整できます。
  • transform-originと似た動作をしますが、offset-anchorはあくまでモーションパスや移動に関連する設定です。

使用例

基本的な使用例

以下の例では、offset-anchorを使って要素のアンカー位置を中央に設定しています。

.element {
  offset-path: path('M10,80 C40,10 65,10 95,80 S150,150 180,80'); /* モーションパスを設定 */
  offset-anchor: center; /* アンカー位置を要素の中央に設定 */
  animation: move 4s infinite;
}
@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

この設定により、要素はモーションパスに沿って中央を基準に移動します。

アンカー位置を指定して調整する例

アンカー位置を具体的に設定することで、アニメーションの動き方を細かく調整できます。

.element {
  offset-path: path('M0,0 L100,100'); /* 直線のモーションパス */
  offset-anchor: 20% 80%; /* アンカー位置を左から20%、上から80%に設定 */
  animation: slide 3s linear infinite;
}
@keyframes slide {
  100% {
    offset-distance: 100%;
  }
}

この例では、要素のアンカー位置が左から20%、上から80%の位置に設定されているため、アニメーション中の要素の動きが基準点からずれます。

offset-anchorとtransform-originの違いを確認する例

offset-anchorとtransform-originを併用して、アニメーションの効果の違いを見てみましょう。

.element {
  offset-path: path('M0,0 L200,0'); /* 横方向のモーションパス */
  offset-anchor: bottom right; /* アンカーを右下に設定 */
  transform-origin: top left; /* 回転の基準点を左上に設定 */
  animation: spinMove 5s infinite;
}
@keyframes spinMove {
  50% {
    transform: rotate(180deg); /* 回転を適用 */
    offset-distance: 100%; /* モーションパスの終点まで移動 */
  }
}

この例では、要素が右下を基準に動き、左上を基準に回転するため、複雑な動きが実現できます。

注意点

  • offset-anchorを使用する場合、offset-pathも設定する必要があります。モーションパスがなければアンカー位置は意味を持ちません。
  • アニメーションやモーションパスを使ったデザインは、ブラウザによってサポート状況が異なることがあるため、対応状況を確認してください。
  • offset-anchorの設定が適切でないと、アニメーションが意図しない動きをする場合がありますので、値の調整が必要です。

まとめ

offset-anchorプロパティは、モーションパスアニメーションで要素の動きを細かく調整するための強力なツールです。アンカー位置を柔軟に設定することで、アニメーションの表現力を高め、視覚的に魅力的な動きを作り出せます。他のアニメーション関連プロパティと組み合わせて、洗練されたデザインを実現してください。

参照:

offset-anchor - MDN Web Docs