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