【CSS Modules】offset-pathプロパティの使い方

offset-pathプロパティは、CSSにおいて要素が移動する軌跡を定義するために使用されるプロパティです。このプロパティを用いることで、要素を単純な直線的な動きだけでなく、任意の複雑な経路に沿ってアニメーションさせることが可能になります。

設定できる値としては、SVGのパスデータを用いて曲線や多角形などのカスタムな軌跡を指定するpath()関数があります。例えば、path('M 10 10 L 100 100 C 150 50 200 150 250 100')のように、詳細な曲線パスを記述できます。また、円形の軌跡を定義するcircle()関数、楕円形のellipse()関数、矩形のinset()関数、多角形のpolygon()関数など、基本的な図形を利用して軌跡を設定することもできます。さらに、外部のSVG要素のパスを参照するためにurl()関数を使用することも可能です。

このプロパティは、特にWebアニメーションにおいて強力な表現力を提供します。例えば、ロゴを特定の曲線パスに沿って優雅に移動させたり、メニューアイコンを円形に配置しながら回転させたりといった、視覚的に豊かでダイナミックな動きを実装する際に不可欠です。offset-pathで定義された軌跡の上を要素がどれだけ移動するかはoffset-distanceプロパティで制御され、要素が軌跡に対してどのように向きを変えるかはoffset-rotateプロパティで指定されます。これらのプロパティと組み合わせることで、より高度で魅力的なアニメーション効果を実現できます。

Copy
1.element {
2  offset-path: path('M 10 10 L 100 10 L 100 100 Z');
3}

引数なし

引数はありません

戻り値なし

戻り値はありません