Editor cubic-bezier

Fitur Editor cubic-bezier

• 01

  Seret kurva, lihat gerakannya

  Dua pegangan yang dapat diseret mengontrol awal dan akhir bezier. Animasi bola yang menyertai memutar kurva pada durasi yang Anda pilih, sehingga Anda dapat melihat pratinjau overshoot dan nuansa ease-out tanpa meninggalkan halaman.

• 02

  Semua preset standar

  Mulai dari ease, linear, ease-in, ease-out, dan ease-in-out built-in CSS — kemudian sesuaikan. Sakelar preset kembali ke "custom" secara otomatis saat Anda menggerakkan pegangan.

• 03

  Salin CSS dengan satu klik

  Nilai cubic-bezier() diperbarui langsung dengan presisi dua desimal, siap untuk dijatuhkan ke transition-timing-function atau animation-timing-function.

FAQ Editor cubic-bezier

Mengapa nilai Y bisa di atas 1 atau di bawah 0?

Titik kontrol Bezier di luar rentang 0–1 menghasilkan efek overshoot dan undershoot — kurva melampaui titik akhirnya sebelum menetap. Ini adalah cara kurva easing "bouncy" dibuat; sumbu X masih harus tetap dalam 0–1.

Bagaimana cara menggunakan output?

Salin string cubic-bezier(...) dan tempel ke dalam nilai transition-timing-function atau animation-timing-function CSS apa pun. Ini berfungsi di setiap browser modern.

Apakah pratinjau akurat dengan apa yang akan dilakukan CSS?

Ya — pratinjau menganimasikan bola dari 0 hingga 100% menggunakan formula cubic bezier yang sama yang digunakan browser untuk transisi. Slider durasi memungkinkan Anda merasakan kurva lambat vs cepat sebelum berkomitmen.

Apa arti ease-in-out sebenarnya?

Ease-in-out mulai lambat, mempercepat di tengah, dan melambat lagi di akhir — kurva cubic-bezier(0.42, 0, 0.58, 1). Ini adalah default untuk sebagian besar gerakan UI yang dipoles karena mencerminkan cara objek fisik nyata mempercepat dan melambat.