Generator cubic-bezier CSS

Apa itu Generator cubic-bezier CSS?

Generator cubic-bezier CSS adalah editor visual gratis untuk fungsi pengaturan waktu cubic-bezier() yang digunakan oleh transisi dan animasi CSS, dibuat untuk pengembang front-end dan desainer gerak. Pilih preset seperti ease, linear, ease-in, ease-out, atau ease-in-out, atau setel sendiri dua titik kontrolnya: nilai x dibatasi pada rentang legal 0–1, sedangkan nilai y bisa melampaui 1 atau di bawah 0 untuk menciptakan overshoot dan antisipasi. Pratinjau menggambar kurva pada kotak satuan sehingga Anda dapat membaca percepatan dan perlambatan sekilas, dan deklarasi tepat cubic-bezier(x1, y1, x2, y2) dihasilkan untuk Anda salin. Gunakan kapan pun kata kunci bawaan terasa terlalu umum dan Anda menginginkan gerakan yang lebih gesit, lebih lentur, atau lebih terkendali.

Cara menggunakan Generator cubic-bezier CSS

1. Buka Pengaturan dan pilih preset awal — ease, linear, ease-in, ease-out, atau ease-in-out — untuk mengisi titik kontrol.
2. Seret dua pegangan bulat pada pratinjau kurva untuk membentuk ulang easing, atau ketik nilai yang tepat di kolom x1, y1, x2, dan y2.
3. Jaga x1 dan x2 antara 0 dan 1; dorong y1 atau y2 di atas 1 atau di bawah 0 untuk menambahkan overshoot atau antisipasi pada gerakan.
4. Baca kurva terhadap garis dasar linear bergaris putus-putus untuk menilai bagaimana easing mempercepat dan memperlambat.
5. Salin nilai cubic-bezier() yang dihasilkan dan tempel ke transition-timing-function atau animation-timing-function Anda.

Contoh

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Pertanyaan yang sering diajukan

Apa arti empat angka cubic-bezier?

Itu adalah koordinat dua titik kontrol: x1, y1 untuk titik pertama dan x2, y2 untuk titik kedua. Kurva selalu dimulai di (0,0) dan berakhir di (1,1); titik kontrol membengkokkannya di antara keduanya, yang mengatur bagaimana properti yang dianimasikan mempercepat dan melambat dari waktu ke waktu.

Mengapa saya tidak bisa menyetel x1 atau x2 di atas 1?

Spesifikasi CSS mengharuskan koordinat x (waktu) kedua titik kontrol tetap antara 0 dan 1, agar fungsi pengaturan waktu tetap menjadi pemetaan yang valid dari kemajuan ke keluaran. Alat ini membatasi kolom x dan pegangan seret ke rentang itu secara otomatis. Sebaliknya, nilai y boleh melampaui 1 atau turun di bawah 0 untuk menciptakan overshoot atau antisipasi.

Bagaimana cara membuat easing yang memantul atau lentur?

Dorong salah satu nilai y di atas 1 (untuk overshoot di akhir) atau di bawah 0 (untuk antisipasi di awal). Misalnya, cubic-bezier(0.34, 1.56, 0.64, 1) melewati sasaran sebelum mengendap, memberikan kesan pegas tanpa JavaScript sama sekali.

Di mana saya menggunakan nilai yang dihasilkan?

Tempel sebagai nilai transition-timing-function atau animation-timing-function — misalnya transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ini menggantikan kata kunci seperti ease atau ease-in-out dengan kurva khusus Anda.

Apakah data saya dikirim ke server?

Tidak. Seluruh editor berjalan di browser Anda dengan JavaScript — titik kontrol dan kurva dihitung secara lokal dan tidak pernah diunggah, jadi ini bekerja secara privat dan bahkan offline setelah halaman dimuat.