CSS offset-path 属性

定義と使用方法

offset-path 属性は、アニメーション要素にパスを作成するために使用されます。

アニメーション<div>にパスを作成します：

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

値	説明
none	デフォルト。要素のデフォルトのoffset-path属性値。
path()	SVG文法を使用してパスを指定します。参照：SVG パス。
ray()	CSS ray()関数を使用してパスを指定します。
url()	SVGファイルのURLを使用してパスを指定します。
<basic-shape>	CSS関数（inset()、circle()、ellipse()、polygon()など）を使用して基本的な形状を定義し、パスを指定します。
<coord-box>	座標ボックスを使用してパスを指定します。
initial	この属性をデフォルト値に設定します。参照： initial。
inherit	親要素からこの属性を継承します。参照： inherit。

デフォルト値：	none
継承性：	いいえ
アニメーション作成：	サポート。参照してください：アニメーションに関連する属性。
バージョン：	CSS3
JavaScript文法：	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
55	79	72	15.4	45