Jarak offset - Trik CSS | CSS Almanak 2024

Properti ini mulai hidup sebagai motion-offset. Ini, dan semua properti motion- * terkait lainnya, diubah namanya menjadi offset- * dalam spesifikasi. Kami mengubah nama di sini di almanak. Jika Anda ingin menggunakannya sekarang, mungkin yang terbaik adalah menggunakan kedua sintaks tersebut.

The motion-offsetproperti di CSS mengatakan: seberapa jauh sepanjang motion-pathAnda? Ini adalah properti animasi yang terkait dengan jalur 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 nilai awal motion-offsetdi 0%, meskipun perlu dicatat bahwa nol adalah nilai default, bahkan jika tidak ditentukan secara eksplisit (kami dapat membiarkannya).

Variabel

The offset-distanceproperti menerima nilai-nilai berikut:

length
percentage

Dalam kedua kasus tersebut, nilai menentukan jarak dari titik awal jalur (defaultnya adalah 0pxatau 0%) ke titik akhir jalur.

Contoh

Dalam contoh ini, kita memiliki dua lingkaran di mana satu lingkaran kecil bergerak di sepanjang jalur lingkaran yang lebih besar.

Berikut adalah file SVG yang kami gunakan untuk menggambar bentuk:

Sekarang, kita dapat mengatur .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 Pena Sederhana dari Animasi Sepanjang Jalan oleh Geoff Graham (@geoffgraham) di CodePen.

Demikian pula, kita dapat menghentikan offset-distancenilai pada 50% dan animasi akan turun di tengah jalan:

Lihat Contoh Pena Sederhana dari Animasi Sepanjang Jalan oleh Geoff Graham (@geoffgraham) di CodePen.

Atau, untuk mengontrol kecepatan animasi, kita bisa mengalikan offset-distancenilainya menjadi 300% untuk mempercepat. Namun, jika kita telah menentukan jumlah waktu animasi berjalan pada nilai yang lebih besar dari yang dibutuhkan elemen untuk menempuh jalur, maka gerakan akan berhenti sampai animasi menyelesaikan intervalnya sebelum mengulang:

Lihat Contoh Pena Sederhana dari Animasi Sepanjang Jalan oleh Geoff Graham (@geoffgraham) di CodePen.

Dukungan browser

yang offset-distanceproperti masih dianggap sebagai fitur eksperimental pada saat tulisan ini dan tidak ada dokumentasi pada dukungan browser. Namun, ada dokumentasi tentang motion-pathdukungan dan kami dapat menggunakannya sebagai dasar untuk saat ini.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.