Penyunting Easing Cubic-Bézier
Rancang kurva easing cubic-bezier khusus dengan penyunting seret dan pratinjau animasi langsung.
Seret kedua pegangan untuk membentuk kurva easing.
transition-timing-function: —;
animation-timing-function: —;
Semuanya berjalan di peramban Anda — tidak ada yang diunggah.
Tentang Penyunting Easing Cubic-Bézier
Cubic-Bézier Easing Editor merancang fungsi timing kustom untuk transisi dan animasi CSS. Seret kedua handle kontrol pada kanvas kurva dan nilai cubic-bezier(x1, y1, x2, y2) diperbarui langsung; pratinjau animasi memutar easing tersebut di samping referensi linear sehingga Anda bisa merasakan perbedaannya, dengan durasi yang bisa disesuaikan dan pemutaran ulang instan.
Sepuluh preset mencakup kosakata umum — ease standar, ease-in, ease-out, dan ease-in-out, ditambah kurva ekspresif seperti back dan anticipate yang melampaui titik akhirnya, serta ramp accelerate dan decelerate bergaya material. Gunakan apa adanya atau sebagai titik awal untuk diseret menjadi sesuatu milik Anda sendiri.
Anda juga bisa mengetik koordinat titik kontrol yang tepat, tekan randomize untuk inspirasi, dan salin nilai cubic-bezier() polos atau aturan CSS siap tempel. Seluruh editor berjalan di browser Anda.
Cara menggunakan Penyunting Easing Cubic-Bézier
- Seret kedua handle pada editor kurva untuk membentuk easing.
- Klik Replay dan bandingkan animasi yang di-ease dengan referensi linear, sesuaikan durasi jika diperlukan.
- Coba preset-nya — ease, back, anticipate, material, dan lainnya — untuk titik awal yang cepat.
- Sempurnakan dengan input titik kontrol numerik untuk nilai yang tepat.
- Salin nilai cubic-bezier() atau potongan CSS lengkapnya.