Generator CSS Cubic Bezier

Seret kalih gagang kangge ngatur kurva easing, pirsani gerakan titik dibandhingake karo kacepetan konstan, lan salin nilai cubic-bezier().

Setelan
Titik kontrol
Titik kontrol kapisan
Titik kontrol kaping kalih
Pratinjau
kurva panjenengan
linear
Nilai
cubic-bezier(0.25, 0.1, 0.25, 1)
Seret gagang utawi pilih setelan kangge ngatur kurva.

Kurva dipungambar langsung wonten ing browser panjenengan. Boten wonten data ingkang dipununggah dhateng BroBroGo.

FAQ

Menapa tegesipun kalih gagang lan sekawan angka kasebat?

Kurva mlampah saking kiri-ngandhap (awal) dhateng tengen-nginggil (pungkasan), kanthi wektu mlampah mangiwa-manengen lan progres minggil. Kalih gagang kasebat minangka titik kontrol ingkang mlengkungaken kurva — saben gagang gadhah nilai X lan Y, saengga dipunserat cubic-bezier(x1, y1, x2, y2). Nilai X tetep antawisipun 0 lan 1, dene Y saged nglangkungi wates nginggil utawi ngandhap.

Kadospundi caranipun ngginakaken nilai punika wonten ing CSS kula?

Salin cubic-bezier() lan pasang wonten ing pundi kemawon fungsi wektu dipunginakaken — transition-timing-function, animation-timing-function, utawi wujud cekak sanesipun, contonipun transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Tembung kunci ease, ease-in, ease-out, lan ease-in-out punika namung kurva cubic-bezier ingkang sampun tetep.

Menapa saged damel efek mantul (bounce) utawi elastis?

Mboten saged piyambakan. Kurva cubic-bezier tunggal saged nggambaraken antisipasi lan overshoot — setelan "back" saged narik gagang nglangkungi kothak kangge nindakaken bab kasebat — nanging namung saged mindhah dhateng satunggal arah banjur mandheg. Efek mantul (bounce) lan elastis mbetahaken owah-owahan arah sawetara kali, saengga mbetahaken CSS keyframes utawi fungsi linear().

Ditulis lan ditinjau dening tim editorial BroBroGo.Pungkasan dipunanyari:

Cara Kerja Fungsi cubic-bezier() ing CSS

Fungsi cubic-bezier(x1, y1, x2, y2) ing CSS minangka cara kanggo nemtokake kurva easing kustom kanggo transisi lan animasi. Kurva iki mlampah saking kiri-ngandhap (titik awal ing koordinat 0,0) dhateng tengen-nginggil (titik pungkasan ing koordinat 1,1). Sajrone animasi lumaku, wektu bakal mlampah mangiwa-manengen (sumbu X), dene progres utawa owah-owahan visual bakal minggil (sumbu Y).

Kanggo ngatur wujud kurva kasebat, CSS nggunakake rong titik kontrol:

  • Titik kontrol kapisan (P1): Ditemtokake dening koordinat x1 lan y1.
  • Titik kontrol kaping kalih (P2): Ditemtokake dening koordinat x2 lan y2.

Nilai X kanggo x1 lan x2 kudu tetep ana ing antarane 0 lan 1, amarga wektu animasi ora bisa mlaku mundur utawa ngluwihi wates wektu sing wis ditemtokake. Nanging, nilai Y kanggo y1 lan y2 bisa diatur ngluwihi wates ngisor (kurang saka 0) utawa ngluwihi wates ndhuwur (luwih saka 1). Keluwihan nilai Y iki sing digunakake kanggo nggawe efek pull-back (antisipasi sadurunge animasi mlaku) utawa overshoot (animasi ngliwati target pungkasan sadurunge mantul bali menyang posisi pungkasan).

Input lan Aturan Watesan Nilai

Nalika nggunakake Generator CSS Cubic Bezier, panjenengan bisa ngatur kurva kanthi rong cara, yaiku nyeret rong gagang kontrol kanthi visual utawa nglebokake angka sacara manual ing kolom input. Piranti iki nduweni aturan lan watesan tartamtu kanggo njaga validitas kode CSS sing diasilake:

  • Watesan Nilai X: Nilai input kanggo sumbu X (titik kontrol kapisan lan kaping kalih) diwatesi strictly antarane 0 lan 1. Yen panjenengan nglebokake angka sing luwih gedhe, contone 9 ing kolom input X banjur ngeklik ing njaba kolom kasebut (kelangan fokus), piranti bakal kanthi otomatis ngowahi angka kasebut dadi 1.
  • Watesan Nilai Y: Nilai input kanggo sumbu Y diwatesi antarane -0.70 lan 1.70. Watesan iki menehi ruang sing cukup kanggo nggawe efek antisipasi lan overshoot sing nyata.
  • Pamulihan Nilai Kosong: Yen panjenengan mbusak kabeh angka ing kolom input banjur mindhah fokus kursor menyang papan liya, piranti bakal mbalekake nilai valid sing pungkasan digunakake. Input sing kosong utawa dudu angka bakal ditundha nganti ana nilai lengkap sing dilebokake.
  • Kontrol nganggo Papan Ketik: Nalika salah siji gagang kontrol lagi fokus, panjenengan bisa menet tombol panah Ngiwa ing papan ketik kanggo ngowahi nilaine kanthi tliti, contone dadi 0.99.

Piranti iki uga nyedhiyakake pilihan setelan (presets) sing wis disiapake kanggo nggampangake panggunaan. Pilihan kasebut kalebu tembung kunci standar CSS kayata ease, ease-in, ease-out, lan ease-in-out, sarta setelan kustom kayata Back In, Back Out, lan Back In-Out. Minangka conto, setelan Back Out bakal kanthi otomatis ngisi nilai cubic-bezier(0.34, 1.56, 0.64, 1) kanggo nggawe efek animasi sing ngliwati wates pungkasan banjur mandheg kanthi alus.

Output lan Visualisasi Animasi

Sajrone panjenengan ngowahi nilai utawa nyeret gagang kontrol, piranti bakal langsung nuduhake asil visual lan kode CSS sing siyap digunakake:

  • kurva panjenengan: Visualisasi nyata saka kurva easing sing lagi diatur. Ing sandhinge kurva iki, ana titik sing obah melu kacepetan kurva kasebut, sing disandingake langsung karo titik liyane sing obah kanthi kacepetan konstan (linear). Iki nggampangake panjenengan mbandhingake pratinjau gerakan kanthi langsung.
  • cubic-bezier(x1, y1, x2, y2): Kode fungsi CSS sing diasilake adhedhasar posisi titik kontrol sing wis diatur.
  • Copied: Nalika panjenengan nyalin nilai cubic-bezier() kasebut, status sukses bakal langsung katon. Proses panyalinan iki mung nduweni status sukses lan ora ana bebaya utawa kabar kegagalan.

Watesan Kemampuan Kurva Bezier Tunggal

Sanajan fungsi cubic-bezier() fleksibel banget kanggo nggawe macem-macem efek gerakan, fungsi iki nduweni watesan matematis sing kudu dingerteni. Kurva Bezier kubik tunggal mung bisa mlaku ing siji arah banjur mandheg utawa mapan ing posisi pungkasan.

Iki tegese panjenengan bisa nggawe efek antisipasi (mundur sethithik sadurunge maju) lan efek overshoot (ngliwati target banjur bali sethithik), nanging panjenengan ora bisa nggawe efek sing ganti arah kaping pirang-pirang. Efek kaya bal mantul (bounce) utawa gerakan elastis sing kedher bolak-balik mbutuhake owah-owahan arah sing bola-bali. Kanggo nggayuh efek kasebut, panjenengan ora bisa mung nggunakake siji fungsi cubic-bezier(), nanging kudu nggunakake CSS @keyframes utawa fungsi linear() sing luwih kompleks.

Keamanan lan Pangolahan Data

Kabeh proses petungan, panggambaran kurva, lan visualisasi gerakan ing piranti iki ditindakake langsung ing njero browser panjenengan. Ora ana data koordinat, setelan, utawa nilai sing diunggah menyang server BroBroGo. Kabeh pangolahan data lumaku sacara lokal ing piranti sing panjenengan gunakake.

Pitakonan sing Sering Ditakonake (FAQ)

Menapa tegesipun kalih gagang lan sekawan angka kasebat? Kurva mlampah saking kiri-ngandhap (awal) dhateng tengen-nginggil (pungkasan), kanthi wektu mlampah mangiwa-manengen lan progres minggil. Kalih gagang kasebat minangka titik kontrol ingkang mlengkungaken kurva — saben gagang gadhah nilai X lan Y, saengga dipunserat cubic-bezier(x1, y1, x2, y2). Nilai X tetep antawisipun 0 lan 1, dene Y saged nglangkungi wates nginggil utawi ngandhap.

Kadospundi caranipun ngginakaken nilai punika wonten ing CSS kula? Salin cubic-bezier() lan pasang wonten ing pundi kemawon fungsi wektu dipunginakaken — transition-timing-function, animation-timing-function, utawi wujud cekak sanesipun, contonipun transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Tembung kunci ease, ease-in, ease-out, lan ease-in-out punika namung kurva cubic-bezier ingkang sampun tetep.

Menapa saged damel efek mantul (bounce) utawi elastis? Mboten saged piyambakan. Kurva cubic-bezier tunggal saged nggambaraken antisipasi lan overshoot — setelan "back" saged narik gagang nglangkungi kothak kangge nindakaken bab kasebat — nanging namung saged mindhah dhateng satunggal arah banjur mandheg. Efek mantul (bounce) lan elastis mbetahaken owah-owahan arah sawetara kali, saengga mbetahaken CSS keyframes utawi fungsi linear().

Generator GradienDamel gradien linear, radial, utawi conic, tambahaken color stops lan atur arahnipun, banjur salin CSS kanthi saklik.Generator Border RadiusNgbunderaken saben pojokan kanthi slider, damel wujud blob organik mawi mode elips, lan salin CSS kanthi cepet.Generator FlexboxAtur wadhah flex lan item-itemipun kanthi kontrol visual, pirsani owah-owahanipun kanthi langsung, lan salin CSS kanthi saklik.Generator CSS GridAtur kolom lan baris panjenengan, seret nglangkungi sel kangge masang item, lan salin CSS grid sarta HTML kanthi saklik.Generator Box ShadowSeret slider kangge ngatur box-shadow, tumpuk lapisan kangge efek jero, lan salin CSS kanthi cepet.Kalkulator CSS clamp()Lebaken ukuran kangge layar alit lan ageng, banjur pikantuk nilai clamp() fluid ingkang saged gantos kanthi alus — kangge ukuran font, padding, margin, utawi gap.