CSS Cubic Bezier Generator

Dokumentasi Cubic Bezier

Apa itu Kurva Bezier Kubik?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Sintaks CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Kasus Penggunaan Umum

Transisi Animasi:Buat animasi halus untuk elemen yang mengubah properti.
Efek Gulir:Kontrol kecepatan animasi gulir.
Elemen Interaktif:Tentukan bagaimana elemen merespons interaksi pengguna seperti mengarahkan kursor atau mengklik.
Desain Gerakan:Buat urutan gerakan yang kompleks untuk elemen UI.

Fungsi Pelonggaran Populer

Ease (default)

Mulai lambat, berakselerasi dengan cepat, lalu melambat lagi.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Kecepatan konstan dari awal hingga akhir.

cubic-bezier(0, 0, 1, 1)

Ease-in

Mulai lambat, lalu berakselerasi.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Mulai dengan cepat, lalu melambat.

cubic-bezier(0, 0, 0.58, 1)

Tips Membuat Kurva Kustom

Pertahankan nilai x antara 0 dan 1:Nilai di luar rentang ini dapat menyebabkan perilaku yang tidak terduga.
Visualisasikan kurva:Gunakan grafik interaktif untuk memahami bagaimana perubahan memengaruhi animasi.
Uji dengan elemen nyata:Selalu pratinjau kurva Anda dengan komponen UI yang sebenarnya untuk memastikannya terasa benar.
Simpan preset:Tandai kurva yang berguna untuk proyek mendatang.