Generator CSS Easing
Editor Kurva Bezier
Pratinjau Animasi
Efek Easing Umum
Generator CSS easing online gratis. Seret titik kontrol untuk membuat kurva cubic-bezier. Preset bawaan untuk ease, ease-in, ease-out, ease-in-out, dan linear. Pratinjau animasi waktu nyata.
Tips & Trik
Seret Titik Kontrol
Seret langsung dua titik kontrol (P1, P2) pada kurva untuk menyesuaikan kurva easing secara real-time. Sumbu X mewakili kemajuan waktu, sumbu Y mewakili perubahan properti, dan kemiringan kurva menentukan variasi kecepatan animasi.
Pratinjau Animasi Langsung
Klik "Putar Animasi" untuk melihat bagaimana bola bergerak mengikuti lintasan fungsi easing. Bilah kemajuan secara intuitif menunjukkan kemajuan waktu.
Salin Satu Klik CSS
Setelah menyesuaikan, klik tombol "Salin" untuk secara otomatis menyalin kode CSS cubic-bezier() ke clipboard Anda, siap ditempelkan langsung ke proyek Anda.
Kasus Penggunaan Umum
Animasi Masuk
ease-out
Animasi Keluar
ease-in
Transisi
ease-in-out
Efek Hover
Kurva Kustom
Indikator Kemajuan
linear
FAQ
Apa itu cubic-bezier?
cubic-bezier adalah fungsi CSS yang mendefinisikan kurva kecepatan animasi, dijelaskan oleh kurva Bezier kubik melalui dua titik kontrol: P1 (x1, y1) dan P2 (x2, y2). Sumbu X dari kurva mewakili kemajuan waktu (0→1), dan sumbu Y mewakili perubahan properti (0→1). Kurva yang lebih curam berarti kecepatan lebih cepat; kurva yang lebih datar berarti kecepatan lebih lambat.
Bagaimana cara menggunakan easing kustom di CSS?
Gunakan langsung di properti CSS transition atau animation: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. Area keluaran kode generator secara otomatis menghasilkan kode CSS yang benar. Klik salin untuk menempel dan menggunakannya secara langsung.
Apa rentang yang valid untuk X dan Y?
CSS cubic-bezier() membutuhkan nilai X antara 0 dan 1 (sesuai waktu dari awal hingga akhir), dan nilai Y biasanya antara 0 dan 1 namun dapat melebihi rentang tersebut (untuk membuat efek memantul). Alat ini membatasi X ke [0, 1] dan Y ke [0, 1] untuk memastikan kurva yang dihasilkan adalah fungsi easing CSS yang valid.
Apa perbedaan antara easing prasetel?
ease: Cepat lalu lambat lalu cepat, cocok untuk transisi umum.
ease-in: Lambat ke cepat, cocok untuk animasi keluar (elemen pergi).
ease-out: Cepat ke lambat, cocok untuk animasi masuk (elemen datang), easing yang paling umum digunakan.
ease-in-out: Lambat di kedua ujung, cepat di tengah, lebih halus dari ease.
linear: Kecepatan konstan, cocok untuk perubahan warna, rotasi, dan animasi lain yang tidak memerlukan akselerasi.