Generator Easing CSS
Generator easing CSS online gratis. Geser titik kendali cubic-bezier pada kurva interaktif, pilih dari 18 preset, lihat pratinjau bola berulang, dan salin fungsi timing seketika.
Apa itu fungsi easing di CSS?
Fungsi easing mengatur laju kemajuan animasi atau transisi sepanjang waktu. Elemen tidak harus bergerak dengan kecepatan konstan: bisa mulai lambat, mengejar, melewati target sedikit, lalu stabil. Di CSS diatur lewat properti transition-timing-function atau animation-timing-function.
Apa arti empat angka pada cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) mendefinisikan kurva lewat dua titik kendali. Titik pertama membentuk awal gerakan dan titik kedua akhirnya. X mewakili waktu pada skala 0 sampai 1, dan Y mewakili kemajuan, dengan 0 sebagai nilai awal dan 1 sebagai nilai akhir.
Mengapa Y boleh di luar 0 sampai 1 tetapi X tidak?
X dipetakan ke waktu nyata, jadi nilai di bawah 0 atau di atas 1 akan merusak kausalitas dan dilarang spesifikasi. Y bebas: di atas 1 melewati target dan di bawah 0 mundur dulu sebelum maju — seperti itulah preset Back menciptakan rasa pantulan.
Apa bedanya ease, ease-in, dan ease-out?
ease adalah bawaan browser dengan awal dan pendaratan lembut; ease-in mulai lambat dan berakhir cepat; ease-out mulai cepat dan melambat; ease-in-out menggabungkan keduanya. Generator ini juga menyertakan preset sine, quad, cubic, quart, expo, back, dan material — total 18.
Bagaimana pratinjau bolanya bekerja?
Dua bola bergerak berulang selama durasi yang Anda tetapkan. Bola atas selalu bergerak dengan fungsi linear sebagai pembanding, sedangkan bola bawah memakai kurva Anda. Celah di antara keduanya yang membesar dan mengecil menunjukkan persis apa yang diubah easing Anda.
Ke mana nilai yang dihasilkan ditempel?
Gunakan sebagai nilai transition-timing-function atau animation-timing-function, misalnya transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Alat ini mengeluarkan fungsi cubic-bezier(...) murni yang siap dimasukkan ke aturan mana pun.
Apakah fungsi easing memengaruhi kinerja animasi?
Fungsi timing sendiri gratis: ia hanya memetakan ulang kemajuan terhadap waktu. Kinerja ditentukan oleh properti yang dianimasikan: transform dan opacity bersahabat dengan GPU, sedangkan menganimasikan properti layout seperti width atau top memicu reflow mahal apa pun easingnya.
Bisakah membuat efek memantul atau elastis sungguhan?
Satu cubic-bezier hanya bisa melewati target sekali dan tidak menghasilkan pantulan berulang seperti efek bounce atau elastis sesungguhnya. Untuk itu, rangkai beberapa keyframe dalam @keyframes atau gunakan Web Animations API; sedangkan satu overshoot halus justru kekuatan cubic-bezier dan fokus alat ini.
Apakah yang saya lakukan di sini diunggah?
Tidak. Kurva digambar pada canvas lokal dan animasi pratinjau berjalan sepenuhnya di browser Anda. Tidak ada yang dikirim ke server, sehingga generator juga berfungsi offline setelah halaman dimuat.
Cara Menggunakan Generator Easing CSS
Pahat kurva easing CSS secara visual alih-alih menebak angka. Seret titik-titik kontrol, bandingkan gerakan Anda dengan acuan linear, dan salin cubic-bezier jadi dalam satu klik. Semuanya berjalan lokal di peramban Anda.
- Pilih salah satu dari 18 prasetel sebagai titik awal, seperti Ease Out, Expo Out, atau Back Out.
- Seret kedua pegangan pada kurva: sumbu X adalah waktu dan harus tetap antara 0 dan 1, sumbu Y adalah kemajuan dan boleh melebihi.
- Haluskan koordinat P1 dan P2 yang tepat dengan masukan angka bila Anda butuh presisi.
- Atur penggeser durasi dan amati dua bola yang berulang — yang berongka selalu linear, yang padat memakai kurva Anda.
- Salin nilai cubic-bezier yang dihasilkan ke transition-timing-function atau animation-timing-function.
Dorong salah satu pegangan Y di atas 1 untuk overshoot yang percaya diri, misalnya cubic-bezier(0.34, 1.56, 0.64, 1) — membuat tombol dan kartu terasa kenyal tanpa keyframe apa pun.
Alat Terkait
- Generator Gradien CSS Buat gradien CSS menakjubkan secara visual. Hasilkan gradien linear, radial dan konikal dengan beberapa color stop, sudut dan posisi kustom. Salin kode CSS siap produksi secara instan.
- Generator Loader CSS Generator loader CSS gratis: sepuluh spinner pemuatan CSS murni dengan kontrol ukuran, kecepatan, ketebalan, dan warna secara langsung, lalu salin HTML dan CSS siap tempel.
- Generator Border Radius Kreatif Generator border radius kreatif gratis online. Seret 8 pegangan atau pilih prasetel blob untuk membuat bentuk CSS organik dan menyalin kodenya seketika.
- Konverter Warna Konverter warna online gratis. Konversi format HEX, RGB, HSL, HSV secara instan dengan pemilih visual. 100% pribadi, berjalan di browser Anda.
- Generator Text Shadow CSS Generator text-shadow CSS online gratis. Tumpuk beberapa lapisan bayangan dengan offset, blur, warna, dan opasitas, coba preset Neon, 3D, Retro, dan salin CSS-nya seketika.
- Generator Clip Path CSS Generator clip-path CSS online gratis. Desain bentuk polygon, circle, ellipse, dan inset dengan titik yang bisa digeser, pratinjau langsung, dan salin kode CSS sekali klik.
- Pemformat CSS Format dan percantik kode CSS secara instan. Konversi CSS minified menjadi kode yang mudah dibaca dengan opsi yang dapat disesuaikan.
- Minifier CSS Minifier CSS online gratis. Kompres dan optimalkan kode CSS secara instan dengan menghapus spasi, komentar, dan karakter tidak perlu. Kurangi ukuran file untuk performa web lebih cepat.