Generator cubic-bezier CSS

Apa itu Generator cubic-bezier CSS?

Generator cubic-bezier CSS adalah editor visual gratis untuk fungsi easing yang digunakan oleh transisi dan animasi CSS, dibuat untuk pengembang front-end dan desainer gerak. Dalam mode cubic-bezier Anda menyeret dua titik kontrol (atau mengetiknya) untuk membentuk kurva: nilai x tetap dalam rentang legal 0–1, sedangkan nilai y bisa melampaui 1 atau di bawah 0 untuk menciptakan overshoot dan antisipasi. Mode steps() mencakup pengaturan waktu bertahap dengan jumlah langkah yang dapat disetel dan sebuah term lompatan — jump-start, jump-end, jump-none, atau jump-both, di mana step-start dan step-end adalah steps(1, …). Pratinjau animasi langsung memutar easing saat ini pada sebuah kotak yang bergerak dan menskala selama durasi yang Anda tetapkan, Anda dapat menumpuk preset apa pun sebagai kurva bayangan untuk membandingkan, dan mengimpor string cubic-bezier() atau steps() yang sudah ada. Salin deklarasi tepat untuk transition-timing-function atau animation-timing-function Anda.

Cara menggunakan Generator cubic-bezier CSS

1. Pilih mode cubic-bezier() atau steps() di atas, atau buka Pengaturan untuk memulai dari preset seperti ease, ease-in-out, atau linear.
2. Dalam mode cubic-bezier, seret dua pegangan pada grafik atau ketik nilai x1, y1, x2, dan y2 yang tepat; dorong y di atas 1 untuk overshoot.
3. Dalam mode steps(), atur jumlah langkah dan pilih term lompatan (jump-start, jump-end, jump-none, atau jump-both) untuk menggambar tangga.
4. Tekan Putar untuk menjalankan animasi langsung pada kotak yang bergerak dan menskala, dan sesuaikan durasi dalam detik untuk merasakan iramanya.
5. Pilih kurva pembanding di Pengaturan untuk menumpuk preset sebagai bayangan pada grafik yang sama, atau tempel nilai di Impor lalu terapkan.
6. Salin nilai cubic-bezier() atau steps() yang dihasilkan 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.34, y1 1.56, x2 0.64, y2 1

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

mode steps, N 4, jump-end

steps(4, jump-end)

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.

Untuk apa mode steps()?

steps() melompat di antara sejumlah nilai tetap alih-alih menginterpolasi secara halus — berguna untuk animasi sprite, penghitung yang berdetak, atau efek bingkai demi bingkai. Atur jumlah langkah dan sebuah term lompatan: jump-start, jump-end, jump-none, atau jump-both. step-start setara dengan steps(1, jump-start) dan step-end dengan steps(1, jump-end).

Bagaimana cara kerja pratinjau animasi langsung?

Tekan Putar dan kotak bergerak melintasi lintasan dan menskala menggunakan easing Anda saat ini, bolak-balik berulang. Ubah durasi dalam detik untuk memperlambat atau mempercepatnya; ini menggunakan animasi CSS murni dengan nilai cubic-bezier() atau steps() Anda sebagai fungsi pengaturan waktu.

Bisakah saya mengimpor nilai easing yang sudah ada?

Bisa. Tempel nilai cubic-bezier(...) atau steps(...) — atau kata kunci seperti ease-in-out, step-start, atau step-end — ke kolom Impor lalu terapkan; editor mengurainya kembali menjadi titik kontrol atau pengaturan langkah.

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.