Generator Cubic-Bezier CSS

Apa Itu Alat Ini?

cubic-bezier() adalah fungsi waktu CSS yang mengontrol bagaimana nilai yang dianimasikan atau bertransisi berakselerasi dan berdeselerasi seiring waktu, bukan bergerak dengan kecepatan konstan. Fungsi ini didefinisikan oleh dua titik kontrol — (x1, y1) dan (x2, y2) — yang membengkokkan kurva antara titik awal tetap (0,0) dan titik akhir tetap (1,1). Nilai x harus tetap antara 0 dan 1, tetapi nilai y bisa keluar dari rentang itu untuk menciptakan efek overshoot atau memantul.

Menyesuaikan empat angka desimal secara manual untuk mendapatkan rasa yang tidak terlalu kasar atau terlalu lembek membutuhkan banyak coba-coba. Alat ini menggantikan tebak-tebakan itu dengan manipulasi langsung: geser slider, lihat kurva melengkung dan bola pratinjau bergerak sesuai, lalu salin CSS setelah gerakannya terasa pas.

Sumber: CSS Easing Functions Level 1, W3C — spesifikasi yang mendefinisikan cubic-bezier() dan lima kata kunci bernama yang menjadi dasar preset alat ini.

Mengapa Menggunakannya?

• Grafik SVG langsung menunjukkan persis bagaimana kurva Anda melengkung di antara titik awal dan akhir yang tetap, dengan kedua titik kontrol dan garis pemandunya digambar dengan jelas.
• Tombol Play menganimasikan elemen pratinjau di sepanjang jalur menggunakan kurva persis Anda, sehingga Anda merasakan gerakannya, bukan hanya melihat grafik statis.
• Preset satu klik untuk lima fungsi easing bernama standar — ease, ease-in, ease-out, ease-in-out, dan linear — sesuai spesifikasi CSS Easing Functions.
• Nilai y bisa turun di bawah 0 atau melebihi 1, memungkinkan Anda membuat easing bergaya overshoot/pantul yang tidak bisa dihasilkan oleh kata kunci bernama.
• Menghasilkan CSS transition-timing-function yang siap ditempel — nilai yang sama juga berfungsi untuk animation-timing-function.
• Berjalan sepenuhnya di browser Anda — apa pun yang Anda atur tidak diunggah ke mana pun. Gratis, tanpa pendaftaran.

Cara Menggunakan

1. Geser slider x1/y1 untuk mengatur titik kontrol pertama, yang membentuk awal animasi.
2. Geser slider x2/y2 untuk mengatur titik kontrol kedua, yang membentuk akhir animasi.
3. Perhatikan kurva hitam pada grafik — kurva yang menonjol di atas garis diagonal di awal berarti gerakan dimulai cepat, sedangkan yang tetap di bawahnya berarti dimulai lambat.
4. Klik Play untuk melihat elemen pratinjau bergerak di sepanjang jalur menggunakan kurva Anda sebagai transition-timing-function.
5. Coba preset (ease, ease-in, ease-out, ease-in-out, linear) sebagai titik awal, lalu sesuaikan slider dari sana.
6. Salin CSS yang dihasilkan dan tempelkan ke aturan transition atau animation.

Contoh

Input

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Output

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ini adalah titik kontrol persis dari kata kunci standar CSS ease — mulai cepat, lalu perlambatan bertahap menuju akhir.

Mengapa nilai y bisa melebihi 0–1

Berbeda dengan sumbu x, yang mewakili waktu dan harus berjalan dari 0 hingga 1, sumbu y mewakili kemajuan nilai yang dianimasikan dan tidak memiliki batasan itu. Mengatur y1 di bawah 0 atau y2 di atas 1 membuat kurva turun melewati nilai awal atau melampaui nilai akhir sebelum akhirnya menetap — inilah dasar efek overshoot dan antisipasi yang digunakan pada umpan balik saat tombol ditekan, kemunculan modal, dan mikro-interaksi UI yang playful. Tidak ada satu pun dari lima kata kunci bernama (ease, ease-in, ease-out, ease-in-out, linear) yang bisa menghasilkan ini; untuk itu diperlukan cubic-bezier() kustom.

transition-timing-function vs. animation-timing-function

Nilai cubic-bezier() yang dihasilkan alat ini bekerja identik di kedua properti. Gunakan transition-timing-function saat gerakan dipicu oleh perubahan status (seperti hover atau pergantian class), dan animation-timing-function di dalam aturan animasi berbasis @keyframes ketika Anda membutuhkan rasa yang sama diterapkan secara otomatis atau berulang.

Pola easing yang umum

• Respons UI yang tegas (tombol, sakelar): jaga titik kontrol dekat dengan garis diagonal dengan sedikit kecenderungan ease-out, misalnya cubic-bezier(0.4, 0, 0.2, 1).
• Kurva standar Material Design: cubic-bezier(0.4, 0, 0.2, 1) — mulai cepat, akhir lembut, banyak digunakan untuk transisi panel dan kartu.
• Pantulan/overshoot: naikkan y2 di atas 1, misalnya cubic-bezier(0.34, 1.56, 0.64, 1), untuk kesan playful saat muncul.
• Antisipasi sebelum bergerak: turunkan y1 di bawah 0 sehingga elemen sedikit mundur sebelum bergerak maju.
• Ease-in-out yang halus untuk animasi berulang: jaga kurva hampir simetris terhadap pusatnya.

Memadukan dengan alat CSS lainnya

Kurva easing jarang berdiri sendiri — biasanya diterapkan pada elemen yang juga membutuhkan bayangan, sudut membulat, atau gradien. Hasilkan gaya visual dengan alat CSS lain di bawah ini, lalu tambahkan fungsi waktu dari alat ini ke aturan atau deklarasi transition/animation yang sama.

→ Generator Box Shadow · Generator Border Radius

Pertanyaan yang Sering Diajukan