CSS Cubic Bezier Generator

Nggawe CSS Cubic Bezier Generator fungsi easing

Titik Kontrol

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Preset Easing populer

Output CSS

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

Preview

Duration: 500ms

Visualisasi kurva Bezier

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

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

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

Related Tools

Nggawe Transformasi CSS3 kanthi Gampang

Alat sing kuat lan intuisi kanggo nggawe transformasi CSS3 sing kompleks tanpa nulis kode. Visualisasi owah-owahan ing wektu nyata lan salin CSS sing digawe kanggo digunakake ing proyek sampeyan.

Generator Transisi CSS3

Transisi opacity lancar

Kurang kanggo Konverter CSS

Ganti kode Kurang dadi CSS. Cepet, gampang, lan aman.

Ngonversi JSON menyang SQL kanthi gampang

Owahi data JSON sampeyan dadi pernyataan SQL INSERT kanthi siji klik. Cepet, aman, lan adhedhasar browser.

Konverter CSS kanggo SCSS

Ganti kode CSS sampeyan dadi SCSS kanthi variabel, nesting, lan liya-liyane. Cepet, gampang, lan aman.

Generator Tombol CSS Gratis

Erstellen Sie ansprechende, responsif Schaltflächen für Ihre Website. Wählen Sie aus über 70 vorgefertigten Stilen oder passen Sie Ihre eigenen mit unseren erweiterten Steuerelementen an.