CSS Cubic Bezier Generator

Povucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.

Predlošci
Kontrolne točke
Prva kontrolna točka
Druga kontrolna točka
Pregled
Vaša krivulja
linear
Vrijednost
cubic-bezier(0.25, 0.1, 0.25, 1)
Povucite ručicu ili odaberite predložak kako biste oblikovali krivulju.

Krivulja se iscrtava izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Česta pitanja

Što znače dvije ručice i četiri broja?

Krivulja se proteže od donjeg lijevog kuta (početak) do gornjeg desnog kuta (kraj), pri čemu vrijeme teče s lijeva na desno, a napredak ide prema gore. Dvije ručice su kontrolne točke koje je savijaju — svaka ima X i Y koordinatu, pa zajedno čine cubic-bezier(x1, y1, x2, y2). X uvijek ostaje između 0 i 1, dok Y može ići iznad vrha ili ispod dna kako bi se stvorio prebačaj (overshoot) ili povlačenje prije smirivanja.

Kako mogu koristiti ovu vrijednost u svom CSS-u?

Kopirajte cubic-bezier() i umetnite ga svugdje gdje ide funkcija vremenskog usklađivanja (timing function) — transition-timing-function, animation-timing-function ili skraćeni oblik, npr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ključne riječi ease, ease-in, ease-out i ease-in-out samo su fiksne cubic-bezier krivulje, pa odabir nekog od tih predložaka prikazuje točnu vrijednost iza te ključne riječi.

Može li se postići efekt odskoka (bounce) ili elastičnosti?

Ne sama po sebi. Jedna cubic-bezier krivulja može stvoriti efekt iščekivanja i prebačaja (overshoot) — predlošci "back" povlače jednu ručicu izvan okvira kako bi postigli upravo to — ali može se kretati samo u jednom smjeru i zatim se smiriti. Efekti odskoka (bounce) i elastičnosti mijenjaju smjer nekoliko puta, što niti jedna pojedinačna cubic-bezier krivulja ne može izraziti; za to su vam potrebni CSS keyframes ili funkcija linear() s mnogo točaka.

Napisao i pregledao urednički tim BroBroGo.Zadnje ažuriranje:

Kako radi CSS Cubic Bezier Generator

Ovaj alat omogućuje vizualno stvaranje CSS krivulje ubrzanja povlačenjem dviju kontrolnih točaka. Dok prilagođavate krivulju, točka se kreće duž nje kako bi demonstrirala efekt ubrzanja, a odmah pored nje nalazi se točka koja se kreće stabilnom brzinom radi usporedbe. Nakon što oblikujete krivulju, alat generira odgovarajuću cubic-bezier() vrijednost koju možete kopirati i upotrijebiti u svom CSS-u.

Krivulja se proteže od donjeg lijevog kuta, koji predstavlja početak, do gornjeg desnog kuta, koji predstavlja kraj. Vrijeme napreduje s lijeva na desno, dok se napredak same animacije kreće prema gore.

Kontrola i unos parametara

Oblikovanje krivulje ubrzanja možete izvršiti na nekoliko načina kroz dostupne kontrole:

  • Povlačenje dviju ručica: Ove ručice izravno kontroliraju oblik krivulje ubrzanja.
  • Prva kontrolna točka X: Brojčana vrijednost koja mora biti unutar raspona od 0 do 1.
  • Prva kontrolna točka Y: Brojčana vrijednost ograničena na raspon od -0.70 do 1.70.
  • Druga kontrolna točka X: Brojčana vrijednost koja također mora ostati između 0 i 1.
  • Druga kontrolna točka Y: Brojčana vrijednost u rasponu od -0.70 do 1.70.
  • Predlošci: Možete odabrati gotove opcije kao što su "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out" ili "Back In-Out".

Alat ima ugrađena pravila za obradu unosa kako bi se osigurala ispravnost vrijednosti:

  • Vrijednosti za X os kontrolnih točaka strogo su ograničene na raspon od 0 do 1. Ako, primjerice, unesete vrijednost poput 9 za "Prva kontrolna točka X" i maknete fokus s polja, vrijednost će se automatski promijeniti u 1.
  • Vrijednosti za Y os ograničene su na raspon od -0.70 do 1.70.
  • Ako potpuno ispraznite brojčano polje za unos i maknete fokus s njega, vratit će se prethodna važeća vrijednost.
  • Prazni ili nebrojčani unosi privremeno će čekati unos potpune i ispravne vrijednosti.
  • Kada je fokus na ručici kontrolne točke, pritisak na tipku sa strelicom lijevo promijenit će njezinu vrijednost, na primjer, na 0.99.

Izlazni rezultati i kopiranje

Kao rezultat vašeg rada, generator prikazuje sljedeće elemente:

  • Vaša krivulja: Vizualni prikaz oblikovane krivulje ubrzanja.
  • cubic-bezier(x1, y1, x2, y2): Točna CSS cubic-bezier() funkcija s koordinatama koje odgovaraju iscrtanoj krivulji.
  • Kopirano: Statusna poruka koja se prikazuje nakon što uspješno kopirate generiranu cubic-bezier() vrijednost. Proces kopiranja ima samo stanje uspjeha te ne prikazuje nikakve poruke o odbijanju ili neuspjehu.

Kada odaberete predložak "Back Out", alat postavlja vrijednost na cubic-bezier(0.34, 1.56, 0.64, 1).

Primjena u CSS tranzicijama i animacijama

Generirana cubic-bezier() vrijednost koristi se za kontrolu brzine i tijeka animacije kroz svojstva kao što su transition-timing-function i animation-timing-function. Pomoću ovih vrijednosti definirate kako će se svojstva mijenjati tijekom vremena.

Dok standardne ključne riječi poput ease, ease-in, ease-out i ease-in-out predstavljaju fiksne i uobičajene krivulje, ovaj alat omogućuje stvaranje prilagođenih efekata koji nadilaze te standardne okvire. Korištenjem prilagođenih kontrolnih točaka (x1, y1, x2, y2) možete precizno definirati ubrzanje i usporavanje u bilo kojem dijelu trajanja animacije.

Efekti prebačaja i ograničenja krivulje

Dok vrijednosti za X (vrijeme) moraju ostati unutar granica od 0 do 1, vrijednosti za Y mogu ići iznad gornje granice (1) ili ispod donje granice (0). To omogućuje stvaranje naprednih efekata:

  • Iščekivanje (pull-back): Postiže se spuštanjem Y vrijednosti ispod 0, što uzrokuje da animacija nakratko krene unatrag prije nego što krene prema naprijed.
  • Prebačaj (overshoot): Postiže se podizanjem Y vrijednosti iznad 1, zbog čega animacija privremeno prelazi svoju završnu točku i zatim se vraća na nju.

Ipak, jedna cubic-bezier funkcija ima svoja ograničenja. Ona može izraziti iščekivanje i prebačaj, ali se može kretati samo u jednom smjeru i nakon toga se smiriti. To znači da se pomoću nje ne mogu stvoriti složeni efekti koji više puta mijenjaju smjer, kao što su efekt odskoka (bounce) ili elastični efekti.

Privatnost i obrada podataka

Krivulja se iscrtava izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Generator gradijenataIzgradite linearni, radijalni ili konusni gradijent, dodajte točke boja i postavite smjer, a zatim kopirajte CSS jednim klikom.Generator zaobljavanja kutova (Border Radius)Zaoblite svaki kut pomoću klizača, oblikujte organske mrlje pomoću eliptičnog načina rada i odmah kopirajte CSS.Flexbox generatorPostavite flex kontejner i njegove stavke pomoću vizualnih kontrola, pratite promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite stupce i retke, povucite preko ćelija za postavljanje stavki i kopirajte grid CSS s odgovarajućim HTML-om jednim klikom.Generator sjena (Box Shadow)Povucite klizače za oblikovanje sjene elementa, složite slojeve za dubinu i odmah kopirajte gotov CSS.CSS clamp() kalkulatorUnesite veličinu za male i velike zaslone i dobit ćete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.