Generator CSS cubic-beziera

Ovaj alat omogućuje oblikovanje prilagođene CSS cubic-bezier() krivulje ubrzanja pomoću četiri klizača i pregled uživo prije kopiranja koda. Prilagodite vrijednosti kontrolnih točaka x1, y1, x2 i y2, pratite kako se krivulja i pokretni element pregleda trenutno ažuriraju, zatim kopirajte transition-timing-function: cubic-bezier(...) izravno u svoj stylesheet.

Što je ovaj alat?

cubic-bezier() je CSS funkcija vremena koja kontrolira kako se animirana ili tranzicijska vrijednost ubrzava i usporava tijekom vremena, umjesto kretanja konstantnom brzinom. Definirana je s dvije kontrolne točke — (x1, y1) i (x2, y2) — koje savijaju krivulju između fiksne početne točke (0,0) i krajnje točke (1,1). Vrijednosti x moraju ostati između 0 i 1, ali vrijednosti y mogu izaći izvan tog raspona za stvaranje efekata prebačaja ili odskoka.

Pisanje ručno, podešavanje četiri decimalna broja da se dobije osjećaj koji nije ni prenagao ni previše mlohav zahtijeva puno pokušaja i pogrešaka. Ovaj alat zamjenjuje to nagađanje izravnom manipulacijom: povucite klizač, gledajte kako se krivulja savija i loptica pregleda kreće u skladu s time, i kopirajte CSS kad kretanje bude osjetno ispravno.

Izvor: CSS Easing Functions Level 1, W3C — specifikacija koja definira cubic-bezier() i pet imenovanih ključnih riječi na kojima se temelje predlošci ovog alata.

Zašto ga koristiti?

SVG graf uživo prikazuje točno kako se vaša krivulja savija između fiksne početne i krajnje točke, s obje kontrolne točke i njihovim ručkama nacrtanima radi jasnoće.
Gumb za reprodukciju animira element pregleda duž trake koristeći vašu točnu krivulju, tako da osjetite kretanje, ne samo vidite statičan graf.
Predlošci jednim klikom za pet standardnih imenovanih funkcija ubrzanja — ease, ease-in, ease-out, ease-in-out i linear — kako je dokumentirano u specifikaciji CSS Easing Functions.
Y-vrijednosti mogu ići ispod 0 ili iznad 1, omogućujući izradu ubrzanja s prebačajem/odskokom koje imenovane ključne riječi ne mogu proizvesti.
Ispisuje CSS transition-timing-function spreman za lijepljenje — ista vrijednost radi i za animation-timing-function.
Izvodi se u potpunosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo. Besplatno, bez prijave.

Kako ga koristiti

Povucite klizače x1/y1 za postavljanje prve kontrolne točke, koja oblikuje kako animacija počinje.
Povucite klizače x2/y2 za postavljanje druge kontrolne točke, koja oblikuje kako animacija završava.
Pratite crnu krivulju na grafu — krivulja koja se rano ispupčuje iznad dijagonale znači da kretanje počinje brzo, ona koja ostaje ispod nje znači da kretanje počinje sporo.
Kliknite Play da vidite kako se element pregleda kreće duž trake koristeći vašu krivulju kao transition-timing-function.
Isprobajte predložak (ease, ease-in, ease-out, ease-in-out, linear) kao polaznu točku, zatim odatle pomičite klizače.
Kopirajte generirani CSS i zalijepite ga u pravilo transition ili animation.

Primjer

Ulaz

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Izlaz

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ovo je standardna CSS ključna riječ ease izražena kao eksplicitne kontrolne točke — brz start, oštro ubrzanje, zatim postupno usporavanje prema kraju.

Zašto y-vrijednosti mogu prijeći 0–1

Za razliku od x-osi, koja predstavlja vrijeme i mora ići od 0 do 1, y-os predstavlja napredak animirane vrijednosti i nema takvo ograničenje. Postavljanje y1 ispod 0 ili y2 iznad 1 čini da krivulja zaroni ispod početne vrijednosti ili proleti iznad krajnje vrijednosti prije stabiliziranja — osnova efekata prebačaja i anticipacije korištenih kod pritisaka gumba, pojavljivanja modalnih prozora i igrivih UI mikro-interakcija. Nijedna od pet imenovanih ključnih riječi (ease, ease-in, ease-out, ease-in-out, linear) ne može ovo proizvesti; za to je potreban prilagođeni cubic-bezier().

transition-timing-function naspram animation-timing-function

Vrijednost cubic-bezier() koju ovaj alat generira radi identično u oba svojstva. Koristite transition-timing-function kad je kretanje pokrenuto promjenom stanja (poput hovera ili prebacivanja klase), a animation-timing-function unutar pravila animacije vođene @keyframes kad vam treba isti osjećaj ubrzanja primijenjen automatski ili u petlji.

Uobičajeni obrasci ubrzanja

Brza UI povratna informacija (gumbi, prekidači): držite kontrolne točke blizu dijagonale s blagom ease-out sklonošću, npr. cubic-bezier(0.4, 0, 0.2, 1).
Standardna krivulja Material Designa: cubic-bezier(0.4, 0, 0.2, 1) — brz start, blag završetak, naširoko korišten za prijelaze panela i kartica.
Odskok/prebačaj: podignite y2 iznad 1, npr. cubic-bezier(0.34, 1.56, 0.64, 1), za igriv osjećaj pojavljivanja.
Anticipacija prije kretanja: spustite y1 ispod 0 tako da se element malo povuče prije nego krene naprijed.
Glatki ease-in-out za animacije u petlji: držite krivulju gotovo simetričnu oko centra.

Uparivanje s drugim CSS alatima

Krivulja ubrzanja rijetko stoji sama — obično se primjenjuje na element kojem trebaju i sjene, zaobljeni rubovi ili definirani gradijenti. Generirajte vizualno stiliziranje ostalim CSS alatima ispod, zatim dodajte funkciju vremena iz ovog alata istom pravilu ili deklaraciji transition/animation.

→ Generator box-shadow · Generator border-radius

Često postavljana pitanja

Što zapravo znače četiri broja u cubic-bezier()?

To su koordinate dviju kontrolnih točaka, (x1, y1) i (x2, y2), koje savijaju Bézierovu krivulju koja ide od fiksne početne točke na (0,0) do fiksne krajnje točke na (1,1). X-os predstavlja proteklo vrijeme (0 do 1), a y-os predstavlja koliko je animirano svojstvo napredovalo, zbog čega x1 i x2 moraju ostati unutar 0–1 dok y1 i y2 mogu izaći izvan tog raspona.

Koja je razlika između ease, ease-in, ease-out i ease-in-out?

ease (CSS zadano) počinje brzo, zatim se blago usporava. ease-in počinje sporo i ubrzava prema kraju, korisno za elemente koji napuštaju zaslon. ease-out počinje brzo i usporava, korisno za elemente koji ulaze na zaslon. ease-in-out je sporo na oba kraja i brže u sredini, dajući glatki, simetrični osjećaj.

Mogu li koristiti istu cubic-bezier() vrijednost i za tranzicije i za animacije?

Da. transition-timing-function i animation-timing-function prihvaćaju potpuno istu sintaksu cubic-bezier() i proizvode istu krivulju ubrzanja — jedina razlika je kojoj CSS značajki (tranziciji naspram animaciji vođenoj keyframesima) je ta funkcija vremena pridružena.

Zašto moja krivulja izgleda pokvareno kad su y1 ili y2 vrlo veliki ili negativni?

To je očekivano — guranje y-vrijednosti daleko izvan 0–1 stvara jak prebačaj, gdje animirana vrijednost zamah preko cilja prije stabiliziranja. To je valjan i često namjeran efekt, ali ako izgleda neželjeno, vratite y1 i y2 bliže rasponu 0–1.

Je li prilagođena krivulja bolja od korištenja samo imenovanih ključnih riječi?

Ne nužno — pet ključnih riječi (ease, ease-in, ease-out, ease-in-out, linear) pokriva većinu svakodnevnih potreba i lakše ih je čitati u kodu. Posegnite za prilagođenim cubic-bezier() kad vam treba specifičan osjećaj koji ključne riječi ne pružaju, poput odskoka, oštrijeg trzaja, ili usklađivanja sa specifikacijom kretanja određenog dizajnerskog sustava.