Properti offset-path CSS

Definisi dan penggunaan

offset-path Atribut digunakan untuk membuat jalur untuk elemen animasi.

Contoh

Buat jalur untuk animasi <div> ini:

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

Coba sendiri

Sintaksis CSS

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

Nilai atribut

Nilai Deskripsi
none default. Nilai default atribut offset-path elemen.
path() Menggunakan sintaksis SVG untuk menentukan jalur. Lihat:Jalur SVG.
ray() Menggunakan fungsi CSS ray() untuk menentukan jalur.
url() Menggunakan URL berkas SVG untuk menentukan jalur.
<basic-shape> Menggunakan fungsi CSS (seperti inset(), circle(), ellipse(), atau polygon()) untuk mendefinisikan bentuk dasar untuk menentukan jalur.
<coord-box> Menggunakan kotak koordinat untuk menentukan jalur.
initial Atur atribut ini ke nilai standarnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai standar: none
Inheritance: tidak
Pembuatan animasi: didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Sintaksis JavaScript: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

dukungan browser

angka di tabel menunjukkan versi browser yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
55 79 72 15,4 45

halaman yang relevan

Panduan：Jalur SVG

Panduan：Animasi CSS

Referensi：Properti offset CSS

Referensi：Properti offset-anchor CSS

Referensi：Properti offset-distance CSS

Referensi：Properti offset-position CSS

Referensi：Properti offset-rotate CSS