【CSS Modules】offset-distanceプロパティの使い方
offset-distanceプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
offset-distanceプロパティは、CSSのMotion Pathモジュールに属し、Webページ上の要素が特定の軌道（パス）に沿って移動する際の、そのパス上の位置を制御するために使用されるプロパティです。具体的には、offset-pathプロパティで定義されたパスの開始点から、どれくらいの距離に要素を配置するかを指定します。
このプロパティの値には、パスの全長に対するパーセンテージ（例: 50%）または具体的な長さ単位（例: 100px）を使用できます。0%はパスの正確な開始位置を、100%はパスの正確な終了位置を表します。たとえば、offset-distance: 25%;と設定すると、要素はパスの開始点から全体の4分の1の地点に配置されます。
offset-distanceは、CSSアニメーション（animationやtransitionプロパティ）と組み合わせて使用されることが多く、要素をパスに沿って滑らかに動かすことを可能にします。これにより、アイコンや画像、テキストなどの様々な要素を、直線、曲線、またはより複雑な形状の軌道に沿って動かし、視覚的に豊かなユーザーインターフェースやアニメーション効果を実現することができます。主に、Webサイトにダイナミックな動きやインタラクションを加えたい場合に活用されます。
公式リファレンス: offset-distance
構文(syntax)
1.element { 2 offset-distance: 50%; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません