Penjana CSS Cubic Bezier

Ditulis dan disemak oleh pasukan editorial BroBroGo.Terakhir dikemas kini: 2026-07-31

Memahami Fungsi Penjana CSS Cubic Bezier

Penjana CSS Cubic Bezier ialah alat visual yang membolehkan anda mencipta keluk pelonggaran (easing curve) tersuai untuk peralihan dan animasi CSS. Keluk pelonggaran menentukan bagaimana kelajuan sesuatu animasi berubah sepanjang tempoh masanya. Dengan menyeret dua pemegang kawalan, anda boleh membentuk keluk tersuai secara visual, melihat simulasi pergerakan masa nyata, dan menyalin kod CSS yang terhasil untuk digunakan dalam projek pembangunan web anda.

Alat ini amat berguna untuk:

Pereka dan pembangun web yang ingin mencipta kesan pelonggaran tersuai untuk peralihan (transition) atau animasi (animation) CSS.
Sesiapa yang ingin memahami nilai cubic-bezier() tepat di sebalik kata kunci pemasaan CSS standard seperti ease, ease-in, ease-out, dan ease-in-out.
Pembangun yang ingin melaksanakan kesan animasi yang mempunyai fasa jangkaan (anticipation/pull-back) atau fasa melampaui had (overshoot) sebelum mencapai keadaan akhir.

Konsep Matematik dan Kawalan Titik cubic-bezier()

Fungsi cubic-bezier(x1, y1, x2, y2) dalam CSS ditakrifkan oleh empat titik kawalan. Dua titik hujung adalah tetap: permulaan pada koordinat (0, 0) dan penghujung pada koordinat (1, 1). Keluk ini berjalan dari bawah-kiri (permulaan) ke atas-kanan (penghujung). Dalam sistem ini, masa bergerak dari kiri ke kanan (paksi X), manakala kemajuan animasi bergerak ke atas (paksi Y).

Dua titik kawalan pertengahan yang boleh dilaraskan menentukan bentuk keluk tersebut:

Titik kawalan pertama (x1, y1): Dikawal oleh pemegang pertama.
Titik kawalan kedua (x2, y2): Dikawal oleh pemegang kedua.

Peraturan dan Had Nilai Input

Untuk memastikan keluk kekal sah dalam spesifikasi CSS, input nilai dilaraskan mengikut peraturan berikut:

Nilai X (x1 dan x2): Mesti sentiasa berada di antara 0 dan 1. Ini kerana masa tidak boleh berjalan ke belakang. Jika anda memasukkan nilai di luar julat ini, seperti memasukkan 9 untuk "Titik kawalan pertama" dan kemudian mengalihkan fokus (lose focus), nilai tersebut akan dihadkan secara automatik menjadi 1.
Nilai Y (y1 dan y2): Boleh dilaraskan melebihi had atas atau bawah, dengan julat antara -0.70 dan 1.70. Membenarkan nilai Y pergi ke bawah 0 (negatif) atau melebihi 1 membolehkan anda mencipta kesan tarik balik (pull-back) atau kesan melampaui had (overshoot).
Interaksi Input: Jika anda mengosongkan medan input berangka dan mengalihkan fokus, sistem akan memulihkan nilai sah yang sebelumnya. Input yang kosong atau bukan berangka akan menunggu sehingga nilai lengkap dimasukkan. Anda juga boleh menggunakan papan kekunci; menekan kekunci anak panah Kiri (Left arrow) semasa pemegang titik kawalan difokuskan akan mengurangkan nilainya, contohnya menjadi 0.99.

Cara Menggunakan Alat dan Membaca Output

Apabila anda melaraskan pemegang pada antara muka, alat ini memaparkan beberapa komponen visual dan output teks secara langsung:

keluk anda: Paparan visual yang menunjukkan bentuk keluk pelonggaran yang sedang anda bentuk. Semasa anda melaraskan keluk, satu titik akan bergerak di sepanjang keluk tersebut untuk menunjukkan kesan pelonggaran, bersebelahan dengan satu lagi titik yang bergerak pada kelajuan malar (linear) sebagai perbandingan.
Pratetap: Anda boleh memilih daripada pilihan pratetap sedia ada seperti "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out", atau "Back In-Out". Sebagai contoh, memilih pratetap "Back Out" akan menetapkan nilai cubic-bezier() secara automatik kepada cubic-bezier(0.34, 1.56, 0.64, 1).
cubic-bezier(x1, y1, x2, y2): Fungsi CSS lengkap yang sepadan dengan bentuk keluk yang telah anda hasilkan. Anda boleh menyalin nilai ini secara terus. Apabila berjaya disalin, status bertulis Copied akan dipaparkan. Proses penyalinan ini hanya mempunyai keadaan berjaya tanpa sebarang makluman kegagalan.

Penggunaan dalam CSS dan Had Keluk

Nilai cubic-bezier() yang dihasilkan digunakan bersama dengan sifat pemasaan CSS. Anda boleh meletakkannya pada sifat transition-timing-function atau animation-timing-function, serta dalam sintaks trengkas (shorthand).

Contoh penggunaan dalam kod CSS:

/* Menggunakan sifat khusus */
.kotak-animasi {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Menggunakan sintaks trengkas */
.butang-interaktif {
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Had Keupayaan Satu Keluk Cubic Bezier

Walaupun fungsi cubic-bezier() sangat berkuasa untuk mencipta peralihan yang lancar, ia mempunyai had fizikal yang nyata. Satu fungsi cubic-bezier hanya boleh bergerak dalam satu arah utama dan kemudian menetap di penghujung. Ia boleh melakukan fasa jangkaan (menarik ke belakang sedikit sebelum bergerak) dan melampaui had (melepasi sasaran sebelum kembali ke kedudukan akhir).

Walau bagaimanapun, satu fungsi cubic-bezier tidak boleh mengekspresikan kesan yang memerlukan pembalikan arah berulang kali seperti kesan lantunan (bounce) atau kesan elastik yang bergetar. Untuk mencipta kesan sedemikian, anda perlu menggunakan animasi bingkai utama (@keyframes) CSS atau fungsi linear() yang mempunyai banyak hentian pemasaan.

Pemprosesan Tempatan dan Privasi

Semua pengiraan, pelarasan pemegang, dan lakaran keluk dilakukan secara terus di dalam penyemak imbas (browser) anda. Tiada sebarang data, koordinat, atau tetapan yang anda lakukan di dalam alat ini akan dimuat naik ke pelayan BroBroGo.

Soalan Lazim (FAQ)

Apakah maksud dua pemegang dan empat nombor tersebut? Keluk bermula dari bawah-kiri (permulaan) ke atas-kanan (penghujung), dengan masa berjalan dari kiri ke kanan dan kemajuan bergerak ke atas. Dua pemegang ialah titik kawalan yang membengkokkannya — masing-masing mempunyai X dan Y, jadi bersama-sama ia adalah cubic-bezier(x1, y1, x2, y2). X kekal antara 0 dan 1, manakala Y boleh pergi ke atas bahagian atas atau di bawah bahagian bawah untuk membuat gerakan melampaui had atau menarik balik sebelum ia menetap.

Bagaimanakah cara saya menggunakan nilai tersebut dalam CSS saya? Salin cubic-bezier() dan letakkan di mana-mana sahaja fungsi pemasaan digunakan — transition-timing-function, animation-timing-function, atau trengkas, cth. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Kata kunci ease, ease-in, ease-out dan ease-in-out hanyalah keluk cubic-bezier tetap, jadi memilih salah satu daripada pratetap tersebut menunjukkan nilai tepat di sebalik kata kunci tersebut.

Bolehkah ia membuat kesan lantunan atau elastik? Tidak secara bersendirian. Satu cubic-bezier boleh menjangka dan melampaui had (overshoot) — pratetap "back" menarik satu pemegang melepasi kotak untuk melakukan perkara itu — tetapi ia hanya boleh bergerak satu arah dan kemudian menetap. Lantunan (bounce) dan elastik membalikkan arah beberapa kali, yang tidak dapat dinyatakan oleh satu cubic-bezier; itu memerlukan bingkai utama CSS atau fungsi linear() dengan banyak hentian.

Soalan Lazim