Apa Itu Kurva Cubic Bezier CSS?

Kurva cubic bezier mendefinisikan bagaimana animasi atau transisi CSS berkembang seiring waktu. Alih-alih bergerak dengan kecepatan konstan, Anda dapat membuat elemen melambat perlahan, mempercepat dengan cepat, atau bahkan melampaui dan memantul kembali.

Definisi teknis: Fungsi CSS cubic-bezier(x1, y1, x2, y2) mengambil empat nilai yang mengontrol dua titik pada kurva. Titik-titik ini menentukan akselerasi dan deselerasi animasi Anda — bentuk kurva adalah bentuk gerakan Anda.

Mengapa Menggunakan Editor Visual?

Menulis nilai cubic-bezier dengan tangan seperti melukis dengan koordinat — secara teknis mungkin tetapi sangat membuat frustrasi. Editor visual memungkinkan Anda untuk:

Umpan Balik Visual

Lihat bentuk kurva saat Anda menyeret titik kontrol dan pratinjau animasi sebenarnya sebelum menyalin kode

Perbandingan Berdampingan

Bandingkan kurva Anda dengan gerakan linear untuk memahami perbedaan perilaku animasi

Perpustakaan Preset

Mulai dari 29 preset bawaan dan sesuaikan dari sana alih-alih memulai dari awal

Pengujian Real-Time

Uji kecepatan berbeda dan lihat bagaimana kurva Anda mempengaruhi beberapa properti CSS secara bersamaan

Cara Menggunakan

Bentuk Kurva Anda

Seret dua handle titik kontrol pada kanvas untuk membentuk kurva easing Anda. Handle indigo (P1) mengontrol awal animasi, sementara handle amber (P2) mengontrol akhir.

Kiat pro: Anda juga dapat mengetik nilai yang tepat ke dalam empat input numerik di bawah kanvas. Nilai X dibatasi pada 0–1, sementara nilai Y dapat berkisar dari -0,5 hingga 1,5 untuk efek overshoot.

Gunakan Preset

Pilih dari 29 preset bawaan yang diatur menurut keluarga. Grup CSS mencakup lima kata kunci standar (linear, ease, ease-in, ease-out, ease-in-out). Keluarga Penner (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) masing-masing menawarkan tiga varian: In, Out, dan InOut.

Pratinjau Animasi Anda

Tonton bola beranimasi bergerak sesuai kurva Anda secara real-time. Aktifkan Bandingkan untuk melihat bola kedua bergerak dengan kecepatan linear berdampingan dengan milik Anda — ini memudahkan untuk memahami bagaimana kurva Anda berbeda dari gerakan konstan.

Pratinjau multi-properti menunjukkan bagaimana easing Anda terlihat diterapkan pada Posisi, Skala, Rotasi, dan Opasitas secara bersamaan. Sesuaikan slider Durasi untuk menguji kecepatan berbeda.

Salin Kode

Klik tombol Salin untuk mendapatkan kode CSS lengkap termasuk transition-timing-function dan animation-timing-function. Anda juga dapat mengklik teks nilai cubic-bezier secara langsung untuk salin cepat.

Fitur

Kanvas Bezier Interaktif

Kanvas berbasis SVG menampilkan kurva cubic bezier Anda dengan kisi koordinat, label sumbu, dan garis referensi linear diagonal.

Dua titik kontrol yang dapat diseret
Tampilan koordinat real-time
Kisi visual dan label sumbu

29 Preset Easing

Mulai dari salah satu dari 29 preset yang diatur ke dalam 9 grup: 5 easing standar CSS ditambah 24 fungsi easing Penner di seluruh 8 keluarga.

Easing standar CSS (5)
Keluarga Penner (24 varian)
Thumbnail kurva mini

Perbandingan Lomba

Bandingkan kurva kustom Anda dengan easing linear dengan animasi lomba bola berdampingan.

Perbandingan berdampingan
Perbedaan kecepatan visual
Pemahaman instan

Pratinjau Multi-Properti

Lihat bagaimana kurva easing Anda mempengaruhi empat properti CSS berbeda sekaligus: Posisi, Skala, Rotasi, dan Opasitas.

Posisi (gerakan horizontal)
Skala (perubahan ukuran)
Efek Rotasi & Opasitas

Dukungan Overshoot

Nilai Y dapat melampaui rentang standar 0–1 (dari -0,5 hingga 1,5), memungkinkan Anda membuat kurva yang melampaui target dan memantul kembali.

Rentang: -0,5 hingga 1,5
Efek bounce-back
Animasi yang terasa alami

Durasi yang Dapat Disesuaikan

Uji easing Anda dengan kecepatan berbeda menggunakan slider durasi, berkisar dari 200ms untuk interaksi mikro yang cepat hingga 3 detik untuk transisi yang lambat dan dramatis.

Rentang 200ms hingga 3000ms
Pengujian kecepatan real-time
Pemilihan waktu yang sempurna

Pertanyaan yang Sering Diajukan

Apa itu cubic-bezier dalam CSS?

cubic-bezier(x1, y1, x2, y2) adalah fungsi CSS yang mendefinisikan kurva waktu kustom untuk transisi dan animasi. Empat nilai mengontrol dua titik handle yang membentuk bagaimana animasi mempercepat dan melambat selama durasinya.

Apa arti keempat nilai tersebut?

Nilai mewakili dua titik kontrol: P1 (x1, y1) dan P2 (x2, y2). Nilai X mewakili waktu (0 = awal, 1 = akhir) dan harus tetap antara 0 dan 1. Nilai Y mewakili kemajuan dan dapat melampaui rentang 0–1 untuk efek overshoot.

Ingat: X = waktu (0–1 saja), Y = kemajuan (-0,5 hingga 1,5 untuk overshoot)

Apa itu fungsi easing Penner?

Persamaan easing Robert Penner adalah serangkaian kurva matematika standar yang banyak digunakan dalam animasi. Setiap keluarga (Sine, Quad, Cubic, dll.) memiliki tiga varian:

In — awal lambat, akhir cepat
Out — awal cepat, akhir lambat
InOut — awal dan akhir lambat, tengah cepat

Editor ini menyediakan perkiraan cubic-bezier dari kurva-kurva ini.

Bisakah nilai Y di bawah 0 atau di atas 1?

Ya. Nilai Y di bawah 0 membuat animasi sementara mundur, sementara nilai di atas 1 membuatnya melampaui target. Ini menciptakan efek bounce dan seperti pegas. Keluarga easing Back menggunakan ini untuk overshoot khasnya.

Y < 0

Gerakan Mundur

Animasi mundur sementara
Menciptakan efek antisipasi

Y > 1

Gerakan Overshoot

Animasi melampaui target
Menciptakan efek bounce-back

Apa perbedaan antara ease dan linear?

linear bergerak dengan kecepatan konstan dari awal hingga akhir. ease dimulai lambat, mempercepat di tengah, dan melambat di akhir — ini terasa lebih alami bagi mata manusia.

Praktik terbaik: Gunakan fitur Bandingkan untuk melihat perbedaannya dengan jelas dan pahami bagaimana easing mempengaruhi gerakan yang dirasakan.

Bagaimana cara menggunakan kode yang dihasilkan?

Salin output CSS dan terapkan ke transisi atau animasi Anda:

Contoh Implementasi CSS

.element {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.element {
  animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}