Generator cubic bezier: kurva easing dengan animasi langsung

Cara memakai

Seret Titik kendali 1 atau Titik kendali 2 di grafik. Klik sebuah titik dan gunakan tombol panah untuk langkah kecil; tahan Shift untuk langkah yang lebih besar.
Ketik nilai pasti di x1 (0 sampai 1), y1, x2 (0 sampai 1) dan y2 jika Anda memerlukan kurva yang tepat. Nilai x harus tetap antara 0 dan 1.
Tekan preset seperti ease-in-out, atau tekan Putar di bawah Pratinjau animasi untuk melihat bola mengikuti kurva.
Salin deklarasi CSS dan pakai di transisi atau animasi.

Arti keempat angka

Kurva easing Bézier kubik dimulai di (0, 0) dan berakhir di (1, 1). Dua titik kendalinya, (x1, y1) dan (x2, y2), menentukan bentuknya. Sepanjang sumbu mendatar adalah bagian waktu yang telah berlalu, dan sepanjang sumbu tegak adalah bagian perubahan yang sudah dilakukan. Spesifikasi CSS Easing Functions membatasi nilai x titik kendali pada rentang 0 sampai 1, karena waktu tidak dapat berjalan mundur atau melewati akhir.

Nilai y tidak memiliki batas seperti itu. Nilai y di atas 1 atau di bawah 0 membuat kurva melampaui batas, sehingga perubahan melewati akhirnya lalu kembali, atau dimulai dengan bergerak ke arah sebaliknya.

cubic-bezier(x1, y1, x2, y2), dengan x1 dan x2 antara 0 dan 1

Preset dan animasi

Kata kunci ease adalah cubic-bezier(0.25, 0.1, 0.25, 1), ease-in adalah cubic-bezier(0.42, 0, 1, 1), ease-out adalah cubic-bezier(0, 0, 0.58, 1) dan ease-in-out adalah cubic-bezier(0.42, 0, 0.58, 1), seperti yang diberikan spesifikasi. Easing linear adalah garis lurus, yang juga digambar oleh kurva cubic-bezier(0, 0, 1, 1).

Bola menjalankan kurva sebagai pewaktuan animasi, sehingga easing terlihat sebagai gerakan. Jika perangkat Anda meminta gerakan dikurangi, animasi dimulai dalam keadaan jeda, dan Putar memulainya.

Gunakan kurva yang lembut seperti ease-out untuk elemen yang muncul di halaman, dan ease-in untuk elemen yang meninggalkannya.
Jaga agar transisi tetap singkat, sehingga easing terasa dan tidak perlu ditunggu.

Contoh: kemajuan pada separuh waktu

Kurva ease-in-out, cubic-bezier(0.42, 0, 0.58, 1), simetris terhadap pusatnya, sehingga pada separuh waktu ia telah melakukan tepat separuh perubahan: pembacaannya menampilkan 0,5000.

Kurva ease, cubic-bezier(0.25, 0.1, 0.25, 1), lebih jauh pada titik yang sama. Pada separuh waktu ia telah melakukan 0,8024 dari perubahan, sehingga bergerak cepat di awal dan melambat di akhir.

Pertanyaan yang sering diajukan

Apa yang ditunjukkan bola?

Bola berjalan dari ujung kiri lintasan ke kanan, dan posisinya mengikuti kurva: posisi mendatar adalah bagian perubahan yang sudah dilakukan sejauh ini. Ketika kurva naik di atas 1, bola melewati ujung lintasan dan dipotong di sana.

Mengapa nilai x tidak boleh melebihi 0 dan 1?

Sumbu mendatar adalah waktu, dan kurva mencakup waktu dari awal sampai akhir. Waktu sebelum awal atau sesudah akhir tidak punya tempat di kurva, jadi spesifikasi menjaga nilai x titik kendali antara 0 dan 1. Nilai y tidak memiliki batas seperti itu.

Apa beda ease-in dan ease-out?

ease-in dimulai pelan dan makin cepat menuju akhir, sedangkan ease-out dimulai cepat dan melambat di akhir. Kedua kurva itu bayangan cermin satu sama lain, sehingga perubahan yang sama dibaca terbalik.

Bisakah saya memakai nilainya di animasi dan juga transisi?

Bisa. Nilai cubic-bezier() yang sama berlaku untuk animation-timing-function maupun transition-timing-function, sehingga deklarasinya dapat dipakai di kedua tempat.

Apakah yang saya seret atau ketik disimpan atau dikirim ke server?

Tidak. Kurva dan animasinya dibuat di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami, jadi salin deklarasinya sebelum meninggalkan halaman.

Sumber

Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.