Poin penting
- 01Seret dua handle titik kontrol untuk mengukir kurva easing secara visual daripada menebak nilai numerik.
- 02Animasi bola langsung memainkan kembali waktu sehingga Anda dapat merasakan gerakan sebelum berkomitmen.
- 03Semua lima preset CSS bawaan (ease, linear, ease-in, ease-out, ease-in-out) tersedia sebagai titik awal.
- 04Nilai cubic-bezier() diperbarui langsung dengan presisi dua desimal, siap untuk ditempel ke properti CSS apa pun.
Mengapa Kurva Easing Kustom Penting untuk UI Motion
Fungsi waktu bawaan CSS — ease, ease-in-out, linear — mencakup banyak tanah, tetapi setiap UI memiliki momen di mana default terasa sedikit salah. Tooltip yang muncul terlalu cepat, modal yang melebihi keadaan terbuka, bilah kemajuan yang terasa mekanis. Kurva Cubic-bezier memungkinkan Anda menyesuaikan gerakan untuk terasa alami daripada mekanis, tetapi empat angka dalam cubic-bezier(0.4, 0, 0.2, 1) hampir tidak mungkin untuk dipikirkan secara langsung.
Editor cubic-bezier Handytool mengubah angka tersebut menjadi kurva visual dengan dua handle yang dapat diseret. Pindahkan pegangan dan animasi bola memainkan kembali segera, sehingga Anda dapat mengulangi dengan perasaan sampai gerakan cocok dengan niat Anda. Kemudian salin nilainya dan jatuhkan ke CSS Anda — selesai.
Cara Merancang Kurva Easing CSS
- 01
Mulai dari preset
Pilih ease, linear, ease-in, ease-out, atau ease-in-out sebagai baseline. Handle menangkap posisi yang benar untuk setiap preset.
- 02
Seret handle titik kontrol
Setiap handle mengontrol salah satu ujung kurva — handle awal membentuk akselerasi awal, handle akhir membentuk desellerasi akhir. Memindahkan pegangan secara otomatis beralih preset ke 'kustom'.
- 03
Tonton animasi bola
Bola beranimasi dari kiri ke kanan menggunakan kurva Anda. Sesuaikan slider durasi untuk melihat pratinjau transisi lambat vs cepat.
- 04
Bereksperimen dengan overshoot
Seret handle sumbu-Y di atas 1 atau di bawah 0 untuk membuat overshoot dan undershoot — efek 'bouncy' yang membuat menu membuka dengan energik.
- 05
Salin nilai CSS
Klik Salin untuk mengambil string cubic-bezier() dan tempel ke transition-timing-function atau animation-timing-function di stylesheet Anda.
Berjalan Sepenuhnya di Browser Anda
Editor adalah alat browser mandiri — tidak ada font, skrip, dan tidak ada data dimuat setelah halaman terbuka. Menyeret handle dan melihat animasi bekerja secara offline. Formula cubic-bezier yang digunakan untuk bola pratinjau sama dengan yang digunakan browser untuk transisi CSS, jadi apa yang Anda lihat di editor persis apa yang akan diproduksi stylesheet Anda.
Tidak ada yang harus diinstal dan tidak ada yang harus didaftar. Output adalah nilai CSS tunggal — tempel dan Anda selesai.
FAQ Editor Cubic-Bezier
Apa itu kurva easing cubic-bezier?
Ini adalah kurva matematika yang ditentukan oleh dua titik kontrol yang menentukan bagaimana transisi CSS atau animasi mempercepat dari waktu ke waktu. Empat angka dalam cubic-bezier(x1, y1, x2, y2) menetapkan posisi titik kontrol tersebut.
Mengapa nilai Y dapat naik di atas 1 atau di bawah 0?
Nilai Y di luar 0–1 menghasilkan overshoot dan undershoot — kurva melampaui titik akhirnya sebelum menetap. Ini menciptakan kurva easing 'bouncy'. Nilai X harus tetap dalam 0–1.
Bagaimana cara menggunakan keluaran?
Salin string cubic-bezier(...) dan tempel ke nilai transition-timing-function atau animation-timing-function CSS apa pun. Ini berfungsi di setiap browser modern.
Apa arti ease-in-out sebenarnya?
Ease-in-out dimulai lambat, mempercepat di tengah, dan melambat di akhir — cubic-bezier(0.42, 0, 0.58, 1). Ini mencerminkan bagaimana objek nyata mempercepat dan melambat dan merupakan pilihan default untuk sebagian besar gerakan UI yang dipoles.
Apakah pratinjau animasi bola akurat terhadap CSS?
Ya — pratinjau menggunakan formula cubic bezier yang sama yang diterapkan browser ke transisi CSS. Slider durasi memungkinkan Anda merasakan kurva lambat vs cepat sebelum berkomitmen.