Penjana Bezier Kubik CSS

Dokumentasi Cubic Bezier

Apakah Keluk Bezier Padu?

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);

Kes Penggunaan Biasa

Peralihan Animasi:Cipta animasi lancar untuk elemen yang mengubah sifat.
Kesan Tatal:Kawal kelajuan animasi tatal.
Elemen Interaktif:Tentukan cara elemen bertindak balas terhadap interaksi pengguna seperti melayang atau mengklik.
Reka bentuk Gerakan:Buat jujukan gerakan yang kompleks untuk elemen UI.

Fungsi Pelonggaran Popular

Ease (default)

Bermula perlahan, memecut dengan cepat, dan kemudian perlahan semula.

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

Linear

Kelajuan malar dari awal hingga akhir.

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

Ease-in

Bermula perlahan, kemudian mempercepatkan.

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

Ease-out

Bermula dengan cepat, kemudian melambatkan.

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

Petua untuk Mencipta Keluk Tersuai

Kekalkan nilai x antara 0 dan 1:Nilai di luar julat ini boleh menyebabkan tingkah laku yang tidak dijangka.
Visualisasikan lengkung:Gunakan graf interaktif untuk memahami cara perubahan mempengaruhi animasi.
Ujian dengan unsur-unsur sebenar:Sentiasa pratonton lengkung anda dengan komponen UI sebenar untuk memastikan ia terasa betul.
Simpan pratetap:Tandakan lengkung berguna untuk projek masa hadapan.