CSS Cubic Bezier Generator

Geser kedua handle untuk membentuk kurva easing, saksikan pergerakan titik animasi dibanding gerakan konstan, lalu salin nilai cubic-bezier().

Preset
Titik kontrol
Titik kontrol pertama
Titik kontrol kedua
Pratinjau
kurva Anda
linear
Nilai
cubic-bezier(0.25, 0.1, 0.25, 1)
Geser handle atau pilih preset untuk membentuk kurva.

Kurva digambar langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.

Tanya Jawab

Apa arti dari kedua handle dan keempat angka tersebut?

Kurva berjalan dari kiri bawah (titik mulai) ke kanan atas (titik akhir), dengan waktu berjalan dari kiri ke kanan dan progres bergerak ke atas. Dua handle adalah titik kontrol yang melengkungkannya — masing-masing memiliki koordinat X dan Y, sehingga bersama-sama membentuk cubic-bezier(x1, y1, x2, y2). Nilai X harus selalu berada di antara 0 dan 1, sedangkan Y dapat melebihi batas atas atau batas bawah untuk membuat gerakan melampaui batas (overshoot) atau menarik kembali sebelum akhirnya berhenti.

Bagaimana cara menggunakan nilai ini di kode CSS saya?

Salin fungsi cubic-bezier() dan tempelkan di mana pun fungsi timing digunakan — seperti transition-timing-function, animation-timing-function, atau shorthand seperti transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Kata kunci bawaan seperti ease, ease-in, ease-out, dan ease-in-out sebenarnya hanyalah kurva cubic-bezier yang nilainya sudah tetap, sehingga memilih preset tersebut akan menampilkan nilai asli di balik kata kunci tersebut.

Apakah kurva ini bisa membuat efek memantul (bounce) atau elastis?

Tidak secara langsung. Satu kurva cubic-bezier dapat membuat efek antisipasi dan overshoot (melewati batas) — preset "back" menarik salah satu handle melewati batas kotak untuk melakukan hal tersebut — tetapi kurva ini hanya bisa bergerak ke satu arah lalu berhenti. Efek memantul (bounce) atau elastis memerlukan perubahan arah beberapa kali, yang tidak bisa diekspresikan oleh satu fungsi cubic-bezier saja; efek tersebut membutuhkan CSS keyframes atau fungsi linear() dengan banyak stop.

Ditulis dan ditinjau oleh tim editorial BroBroGo.Terakhir diperbarui:

Memahami Cara Kerja CSS Cubic Bezier Generator

CSS Cubic Bezier Generator adalah alat bantu visual yang dirancang untuk memudahkan Anda membuat kurva easing CSS kustom dengan cara menggeser dua titik kontrol. Saat Anda menyesuaikan bentuk kurva tersebut, sebuah titik akan bergerak di sepanjang kurva untuk mendemonstrasikan efek easing yang dihasilkan. Di samping titik tersebut, terdapat titik lain yang bergerak dengan kecepatan konstan sebagai pembanding. Setelah mendapatkan gerakan yang diinginkan, alat ini akan menyediakan nilai fungsi cubic-bezier() yang sesuai untuk langsung Anda salin dan gunakan di dalam kode CSS Anda.

Alat ini sangat berguna bagi siapa saja yang ingin membuat efek easing kustom untuk transisi atau animasi CSS. Selain itu, alat ini membantu Anda memahami nilai cubic-bezier() yang sebenarnya berada di balik kata kunci fungsi waktu standar CSS seperti ease, ease-in, ease-out, dan ease-in-out. Bagi desainer atau pengembang yang ingin menerapkan animasi dengan efek antisipasi (pull-back) atau efek melampaui batas (overshoot) sebelum mencapai kondisi akhir, alat ini menyediakan visualisasi yang sangat akurat.

Input dan Kontrol Kurva

Untuk membentuk kurva easing, Anda dapat berinteraksi langsung dengan beberapa kontrol input berikut:

  • Menggeser dua handle: Anda dapat menggeser kedua handle ini secara visual untuk mengontrol dan mengubah bentuk kurva easing.
  • Titik kontrol pertama X: Nilai numerik untuk koordinat X pada titik kontrol pertama, dengan batas nilai antara 0 dan 1.
  • Titik kontrol pertama Y: Nilai numerik untuk koordinat Y pada titik kontrol pertama, dengan batas nilai antara -0.70 dan 1.70.
  • Titik kontrol kedua X: Nilai numerik untuk koordinat X pada titik kontrol kedua, dengan batas nilai antara 0 dan 1.
  • Titik kontrol kedua Y: Nilai numerik untuk koordinat Y pada titik kontrol kedua, dengan batas nilai antara -0.70 dan 1.70.
  • Pilihan preset: Anda juga dapat memilih dari beberapa opsi preset yang tersedia, seperti "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out", atau "Back In-Out".

Output yang Dihasilkan

Setelah Anda menyesuaikan input atau menggeser handle, alat ini akan menampilkan beberapa output secara langsung:

  • kurva Anda: Representasi visual dari kurva easing yang sedang Anda bentuk.
  • cubic-bezier(x1, y1, x2, y2): Nilai fungsi cubic-bezier() CSS yang sesuai dengan bentuk kurva yang telah Anda buat.
  • Copied: Status indikator yang akan ditampilkan setelah Anda berhasil menyalin nilai cubic-bezier() tersebut. Proses penyalinan ini hanya memiliki status sukses dan tidak memiliki perintah penolakan atau kegagalan eksplisit.

Aturan Penggunaan dan Batasan Nilai

Dalam merancang kurva dengan CSS Cubic Bezier Generator, terdapat beberapa aturan teknis dan perilaku sistem yang perlu diperhatikan:

  • Arah Kurva: Kurva selalu berjalan dari sudut kiri bawah (titik awal) menuju sudut kanan atas (titik akhir). Dalam visualisasi ini, waktu bergerak maju dari kiri ke kanan, sedangkan progres animasi bergerak ke atas.
  • Batasan Sumbu X: Nilai input untuk koordinat X pada kedua titik kontrol wajib berada di antara rentang 0 hingga 1.
  • Batasan Sumbu Y: Nilai input untuk koordinat Y pada kedua titik kontrol dapat diatur melampaui batas atas atau di bawah batas bawah, yaitu dalam rentang -0.70 hingga 1.70. Hal ini memungkinkan Anda untuk menciptakan efek overshoot (melampaui batas) atau efek pull-back (menarik kembali).
  • Validasi Input Otomatis: Jika Anda memasukkan nilai di luar batas, misalnya mengetik angka 9 pada "Titik kontrol pertama" lalu memindahkan fokus kursor (kehilangan fokus), sistem secara otomatis akan mengubah nilai tersebut menjadi 1. Jika Anda mengosongkan kolom input numerik lalu memindahkan fokus kursor, sistem akan mengembalikan nilai valid yang digunakan sebelumnya. Input yang kosong atau non-numerik akan ditangguhkan hingga Anda memasukkan nilai yang lengkap.
  • Kontrol Keyboard: Anda dapat menekan tombol panah Kiri pada keyboard saat salah satu handle titik kontrol sedang dalam fokus untuk mengubah nilainya secara presisi, misalnya bergeser menjadi 0.99.
  • Preset Khusus: Sebagai contoh, memilih preset "Back Out" akan secara otomatis mengatur nilai cubic-bezier() menjadi cubic-bezier(0.34, 1.56, 0.64, 1).

Batasan Fungsi Cubic Bezier

Meskipun fungsi cubic-bezier() sangat fleksibel untuk mengatur kecepatan dan progres animasi, fungsi ini memiliki batasan struktural. Sebuah fungsi cubic-bezier() tunggal dapat mengantisipasi gerakan (menarik ke belakang sebelum mulai) dan melampaui batas akhir (overshoot), tetapi gerakan tersebut hanya bisa berjalan satu arah lalu berhenti secara stabil.

Fungsi ini tidak dapat mengekspresikan efek animasi yang berbalik arah beberapa kali secara berulang, seperti efek memantul (bounce) atau efek elastis (elastic). Untuk efek kompleks yang membutuhkan perubahan arah berkali-kali, satu kurva cubic-bezier() saja tidak akan cukup.

Keamanan dan Privasi Data

Kami sangat menghargai privasi Anda saat menggunakan alat ini. Seluruh proses pembuatan dan visualisasi kurva digambar secara langsung di dalam browser Anda. Tidak ada satu pun pengaturan, koordinat, atau nilai yang Anda buat di dalam alat ini yang diunggah ke server BroBroGo. Semua pemrosesan data bersifat lokal pada perangkat Anda.

Pertanyaan yang Sering Diajukan (FAQ)

Apa arti dari kedua handle dan keempat angka tersebut? Kurva berjalan dari kiri bawah (titik mulai) ke kanan atas (titik akhir), dengan waktu berjalan dari kiri ke kanan dan progres bergerak ke atas. Dua handle adalah titik kontrol yang melengkungkannya — masing-masing memiliki koordinat X dan Y, sehingga bersama-sama membentuk cubic-bezier(x1, y1, x2, y2). Nilai X harus selalu berada di antara 0 dan 1, sedangkan Y dapat melebihi batas atas atau batas bawah untuk membuat gerakan melampaui batas (overshoot) atau menarik kembali sebelum akhirnya berhenti.

Bagaimana cara menggunakan nilai ini di kode CSS saya? Salin fungsi cubic-bezier() dan tempelkan di mana pun fungsi timing digunakan — seperti transition-timing-function, animation-timing-function, atau shorthand seperti transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Kata kunci bawaan seperti ease, ease-in, ease-out, dan ease-in-out sebenarnya hanyalah kurva cubic-bezier yang nilainya sudah tetap, sehingga memilih preset tersebut akan menampilkan nilai asli di balik kata kunci tersebut.

Apakah kurva ini bisa membuat efek memantul (bounce) atau elastis? Tidak secara langsung. Satu kurva cubic-bezier dapat membuat efek antisipasi dan overshoot (melewati batas) — preset "back" menarik salah satu handle melewati batas kotak untuk melakukan hal tersebut — tetapi kurva ini hanya bisa bergerak ke satu arah lalu berhenti. Efek memantul (bounce) atau elastis memerlukan perubahan arah beberapa kali, yang tidak bisa diekspresikan oleh satu fungsi cubic-bezier saja; efek tersebut membutuhkan CSS keyframes atau fungsi linear() dengan banyak stop.

Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.Border Radius GeneratorBulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.Flexbox GeneratorAtur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.CSS Grid GeneratorAtur kolom dan baris Anda, seret kursor melewati sel untuk menempatkan item, lalu salin kode CSS grid beserta HTML yang cocok dalam sekali klik.Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Kalkulator CSS clamp()Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.