CSS Cubic Bezier Generator

Dokumentasi Cubic Bezier

Apa 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:Nggawe animasi Gamelan kanggo unsur ngganti sifat.
Efek Gulung:Ngontrol kacepetan animasi gulung.
Elemen Interaktif:Nemtokake cara unsur nanggapi interaksi pangguna kaya nglayang utawa ngeklik.
Desain Gerakan:Nggawe urutan gerakan kompleks kanggo unsur UI.

Fungsi Easing Populer

Ease (default)

Miwiti alon-alon, nyepetake kanthi cepet, banjur mudhun maneh.

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

Linear

Kacepetan konstan saka wiwitan nganti pungkasan.

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

Ease-in

Diwiwiti alon, banjur nyepetake.

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

Ease-out

Diwiwiti kanthi cepet, banjur decelerates.

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

Tips kanggo Nggawe Kurva Custom

Tansah nilai x antarane 0 lan 1:Nilai ing njaba kisaran iki bisa nyebabake prilaku sing ora dikarepake.
Visualisasi kurva:Gunakake grafik interaktif kanggo mangerteni carane owah-owahan mengaruhi animasi.
Tes karo unsur nyata:Tansah pratinjau kurva sampeyan kanthi komponen UI sing nyata kanggo mesthekake yen pancen bener.
Simpen prasetel:Bookmark kurva migunani kanggo proyèk mangsa.