Kategori: Alat pengembang
Generator Cubic Bezier
Rancang kurva easing CSS kustom
Seret dua titik kontrol untuk membentuk fungsi timing cubic-bezier(), lihat kurva dan pratinjau gerakan yang diperbarui secara langsung, lalu salin deklarasi animation-timing-function yang sudah jadi. Kurvanya dihitung di browser Anda.
Progres pada 50% durasi: 0.802
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Easing pada transition atau animation CSS adalah kurva bezier kubik dari (0,0) ke (1,1): dua titik di antaranya menentukan apakah gerakan dimulai lambat lalu berakhir cepat, melampaui batas (overshoot), atau sesuatu yang lain sama sekali. Kata kunci bernama (ease, ease-in-out, dan sebagainya) hanyalah lima titik tetap dalam ruang itu. Alat ini menggambarkan kurva dari dua titik kontrol yang Anda atur, menampilkan sebuah kotak yang bergerak dengan fungsi timing itu persis, dan melaporkan seberapa jauh progres gerakan yang telah di-easing pada titik tengah — angka yang paling sulit dibayangkan hanya dari kurvanya saja.
Cara memakainya
- Mulai dari preset atau atur langsung dua titik kontrolnya.
- Amati kurva dan pratinjau gerakan yang diperbarui.
- Salin deklarasi cubic-bezier() ke dalam transition atau animation Anda.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Apakah ada yang dihitung di server?
- Tidak. Kurva, pratinjau gerakan, dan angka progresnya semuanya dihitung oleh JavaScript yang berjalan di halaman.
- Mengapa dua nilai X dibatasi antara 0 dan 1?
- X mewakili waktu yang berlalu, yang menurut spesifikasi CSS harus berjalan maju dari 0 ke 1 agar kurva tetap menjadi fungsi waktu yang valid. Y adalah progres yang di-easing dan boleh turun di bawah 0 atau naik di atas 1, itulah cara overshoot atau pantulan dibuat.
- Apa arti angka di titik tengah itu?
- Itu adalah progres yang telah di-easing — bukan progres garis lurus — pada saat tepat separuh durasi animasi telah berlalu. Nilai di atas 50% di sana berarti gerakan sudah lebih cepat dari kecepatan linear pada titik tengah.