CSS offset-path özelliği

Tanım ve kullanım

offset-path Özellik, animasyon elementleri için bir yol oluşturmak için kullanılır.

Animasyon <div> için bir yol oluşturun:

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;

Değer	Açıklama
none	Varsayılan. Elemanın varsayılan offset-path özelliği değeri.
path()	Yol belirlemek için SVG dilbilgisi kullanın. Bakınız:SVG Yolu.
ray()	Yol belirlemek için CSS ray() fonksiyonunu kullanın.
url()	Yol belirlemek için SVG dosyasının URL'sini kullanın.
<basic-shape>	Yol belirlemek için temel şekilleri (örneğin, inset(), circle(), ellipse() veya polygon()) kullanarak CSS fonksiyonları tanımlayın.
<coord-box>	Yol belirlemek için koordinat kutusu kullanın.
initial	Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit	Bu özelliği ebeveyn elemanından miras alır. Bakınız inherit.

Varsayılan değer:	none
Miraslık:	Hayır
Animasyon yapımı:	Desteklenir. Bakınız:Animasyonla ilgili özellikler.
Sürüm:	CSS3
JavaScript dilbilgisi:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

表декteki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome	Edge	Firefox	Safari	Opera
55	79	72	15.4	45