Jarak mengimbangi - Trik CSS | CSS Almanac 2025

Harta ini memulakan kehidupan sebagai motion-offset. Ini, dan semua sifat gerakan-* lain yang berkaitan, dinamakan semula sebagai ofset- * dalam spesifikasi. Kami menukar nama di sini dalam almanak. Sekiranya anda mahu menggunakannya sekarang, mungkin sebaiknya gunakan kedua-dua sintaks tersebut.

The motion-offsetharta di CSS berkata: sejauh mana sepanjang motion-pathanda? Ini adalah harta animasi yang berkaitan dengan jalan gerakan.

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); motion-offset: 0%; /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Dalam contoh di atas, kami telah menetapkan awal motion-offsetnilai-pada 0%, walaupun berbaloi dan berkata bahawa sifar adalah nilai lalai, walaupun tidak ditakrifkan dengan jelas (kami boleh meninggalkan yang keluar).

Pemboleh ubah

Tempat offset-distancepenginapan ini menerima nilai berikut:

length
percentage

Dalam kedua kes tersebut, nilainya menentukan panjang jarak dari titik permulaan jalan (lalai adalah 0pxatau 0%) hingga titik akhir jalan.

Contohnya

Dalam contoh ini, kita mempunyai dua bulatan di mana satu bulatan kecil bergerak di sepanjang lorong bulatan yang lebih besar.

Berikut adalah fail SVG yang kami gunakan untuk melukis bentuknya:

Sekarang, kita boleh menetapkan .markerkelas di CSS kita untuk mengikuti .trackkoordinat kelas:

/* The motion-offset is zero by default */ .marker ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Lihat Contoh Mudah Pen Animasi Sepanjang Jalan oleh Geoff Graham (@geoffgraham) di CodePen.

Begitu juga, kita boleh menghentikan offset-distancenilainya pada 50% dan animasi akan turun di sekitar jalan:

Lihat Contoh Mudah Pen Animasi Sepanjang Jalan oleh Geoff Graham (@geoffgraham) di CodePen.

Atau, untuk mengawal kelajuan animasi, kita dapat menggandakan offset-distancenilainya hingga 300% untuk mempercepat. Walau bagaimanapun, jika kita telah menentukan jumlah masa animasi berjalan pada nilai yang lebih besar daripada elemen yang diperlukan untuk menempuh jalan, pergerakan akan berhenti sehingga animasi selesai selang sebelum mengulangi:

Lihat Contoh Mudah Pen Animasi Sepanjang Jalan oleh Geoff Graham (@geoffgraham) di CodePen.

Sokongan penyemak imbas

yang offset-distanceharta masih dianggap ciri eksperimen pada masa penulisan ini dan tidak ada dokumentasi mengenai sokongan pelayar. Namun, ada dokumentasi mengenai motion-pathsokongan dan kami dapat menggunakannya sebagai garis dasar buat masa ini.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.