CSS Cubic Bezier generatorius

Parašė ir peržiūrėjo BroBroGo redakcijos komanda.Paskutinį kartą atnaujinta: 2026-07-31

CSS animacijos kreivės ir laiko funkcijos pagrindai

CSS perėjimai (angl. transitions) ir animacijos (angl. animations) leidžia keisti elementų savybes per tam tikrą laiką. Tačiau judėjimas realiame pasaulyje retai vyksta pastoviu greičiu. Kad skaitmeninė sąsaja atrodytų natūraliau, naudojamos laiko funkcijos (angl. timing functions), kurios nustato, kaip keičiasi animacijos greitis jai vykstant.

Šiam judėjimui aprašyti CSS naudoja trečiojo laipsnio Bezier kreives (angl. cubic Bezier curves). Kreivė vizualiai vaizduoja santykį tarp praėjusio laiko ir animacijos progreso. Laikas šiame grafike progresuoja iš kairės į dešinę, o animacijos progresas kyla iš apačios į viršų. Kreivė visada prasideda kairiajame apatiniame taške, kuris žymi pradžią, ir baigiasi dešiniajame viršutiniame taške, žyminčiame pabaigą. Šios kreivės formą nustato du valdymo taškai, kurių koordinatės tiesiogiai aprašo animacijos pagreitėjimą ir sulėtėjimą.

Valdymo taškų vaidmuo ir matematinės ribos

Kiekviena cubic-bezier(x1, y1, x2, y2) funkcija yra apibrėžiama keturiomis koordinatėmis, kurios nurodo dviejų valdymo taškų padėtį:

Pirmasis valdymo taškas (x1, y1) valdo kreivės pradžios formą.
Antrasis valdymo taškas (x2, y2) valdo kreivės pabaigos formą.

Šioms koordinatėms taikomos griežtos matematinės taisyklės, užtikrinančios, kad laikas judėtų tik į priekį:

X ašies ribos: Tiek x1, tiek x2 reikšmės privalo būti intervale nuo 0 iki 1. Tai reiškia, kad valdymo taškai negali atsidurti už laiko pradžios ar pabaigos ribų.
Y ašies ribos: Y koordinatės (y1 ir y2) gali viršyti standartines ribas ir būti nustatomos intervale nuo -0.70 iki 1.70. Tai leidžia animacijos progresui išeiti už pradinės arba galutinės būsenos ribų.

Kai Y koordinatė yra mažesnė už 0, sukuriamas atatrankos arba pasirengimo (angl. pull-back) efektas, kai elementas prieš judėdamas pirmyn šiek tiek pasislenka atgal. Kai Y koordinatė viršija 1, sukuriamas perviršio (angl. overshoot) efektas, kai elementas peršoka savo galutinę būseną ir tik tada sugrįžta į galutinį tašką.

Generatoriaus įvesties valdymas ir taisyklės

„CSS Cubic Bezier generatorius“ leidžia vizualiai kurti ir tikslinti šias kreives. Įrankis palaiko kelis įvesties būdus, kuriems taikomos specifinės elgsenos taisyklės:

Rankenėlių vilkimas: Vilkite dvi rankenėles tiesiai grafike, kad suformuotumėte animacijos kreivę.
Skaitinė įvestis: Rankiniu būdu įvedant reikšmes laukeliuose „Pirmasis valdymo taškas“ ir „Antrasis valdymo taškas“, X reikšmės ribojamos nuo 0 iki 1, o Y reikšmės – nuo -0.70 iki 1.70.
Klaviatūros valdymas: Sufokusavus valdymo taško rankenėlę, galima keisti jos reikšmę klaviatūra – pavyzdžiui, paspaudus kairįjį rodyklės klavišą, reikšmė pasikeičia į, pavyzdžiui, 0.99.
Klaidų taisymas: Jei įvesite netinkamą reikšmę (pavyzdžiui, įrašysite skaičių 9 laukelyje „Pirmasis valdymo taškas“) ir pašalinsite žymeklį iš laukelio (angl. lose focus), sistema automatiškai pakeis šią reikšmę į maksimalią leistiną ribą, t. y. 1. Jei visiškai išvalysite skaitinį laukelį ir pašalinsite žymeklį, bus sugrąžinta paskutinė galiojanti reikšmė. Tušti arba ne skaitiniai įvesties laukeliai tiesiog laukia, kol bus įvesta pilna ir teisinga reikšmė.

Išankstiniai nustatymai ir vizualus palyginimas

Sąsajoje pateikiami standartiniai išankstiniai nustatymai (angl. presets), leidžiantys greitai pasirinkti populiarias kreives:

Standartiniai CSS raktiniai žodžiai: „ease“, „ease-in“, „ease-out“ ir „ease-in-out“.
Sudėtingesni judesiai: „Back In“, „Back Out“ ir „Back In-Out“.

Pavyzdžiui, pasirinkus išankstinį nustatymą „Back Out“, įrankis automatiškai nustato cubic-bezier() reikšmę į cubic-bezier(0.34, 1.56, 0.64, 1). Ši kreivė naudoja Y reikšmę 1.56, kuri sukelia pastebimą perviršio efektą animacijos pabaigoje.

Keičiant kreivę, grafike „jūsų kreivė“ vizualiai vaizduoja suformuotą judėjimą. Šalia esantis judantis taškas demonstruoja sukurto efekto greitį, o greta judantis kitas taškas juda pastoviu (tiesiniu) greičiu, kad galėtumėte lengvai palyginti skirtumą. Sukūrus norimą kreivę, sugeneruotą cubic-bezier(x1, y1, x2, y2) reikšmę galima nukopijuoti. Sėkmingai nukopijavus, rodoma būsena „Copied“.

Praktinis taikymas CSS koduose

Sukurta cubic-bezier() reikšmė yra naudojama su CSS savybėmis transition-timing-function arba animation-timing-function. Taip pat ją galima įtraukti į trumpesnius CSS užrašymus.

Pavyzdys su perėjimu (transition):

.elementas {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Pavyzdys su animacija (animation):

.elementas {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

Vienos kreivės galimybių ribos

Nors cubic-bezier() funkcija yra labai lanksti, ji turi fizinių apribojimų. Viena Bezier kreivė gali aprašyti judėjimą, kuris turi pasirengimo (atatrankos) fazę pradžioje ir perviršio fazę pabaigoje, tačiau ji gali judėti tik viena kryptimi ir galiausiai nusistovėti.

Viena cubic-bezier() funkcija negali išreikšti efektų, kurie kelis kartus keičia kryptį, pavyzdžiui, spyruokliavimo (angl. elastic) arba šokinėjimo (angl. bounce). Tokiems efektams sukurti reikalingi sudėtingesni sprendimai, pavyzdžiui, CSS @keyframes taisyklės arba naujesnė linear() funkcija su daugeliu tarpinių taškų.

Duomenų apdorojimas ir privatumas

Naudojantis šiuo įrankiu, jūsų privatumas yra visiškai apsaugotas. Kreivė braižoma tiesiog jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“ serverius, o visas skaičiavimas ir vizualizacija vyksta lokaliai jūsų įrenginyje.

Dažniausiai užduodami klausimai (DUK)

Ką reiškia dvi rankenėlės ir keturi skaičiai?

Kreivė eina iš apačios kairėje (pradžia) į viršų dešinėje (pabaiga), kur laikas bėga iš kairės į dešinę, o progresas – iš apačios į viršų. Dvi rankenėlės yra valdymo taškai, kurie ją išlenkia – kiekvienas turi X ir Y koordinates, todėl kartu jie sudaro cubic-bezier(x1, y1, x2, y2). X reikšmė visada lieka tarp 0 ir 1, o Y gali išeiti virš viršutinės arba žemiau apatinės ribos, kad sukurtų perviršio arba atatrankos judesį prieš sustojant.

Kaip naudoti šią reikšmę savo CSS kode?

Nukopijuokite „cubic-bezier()“ funkciją ir įklijuokite ją ten, kur nurodoma animacijos greičio kreivė (timing function) – transition-timing-function, animation-timing-function arba trumpajame užrašyme, pvz., transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Raktiniai žodžiai ease, ease-in, ease-out ir ease-in-out yra tiesiog fiksuotos cubic-bezier kreivės, todėl pasirinkę vieną iš šių nustatymų pamatysite tikslią reikšmę.

Ar galima sukurti šoktelėjimo (bounce) arba elastingumo efektą?

Savaime ne. Viena cubic-bezier kreivė gali sukurti pasirengimo ir perviršio efektą (išankstiniai nustatymai su „back“ ištempia vieną rankenėlę už rėmelio ribų būtent tam), tačiau judėjimas gali vykti tik viena kryptimi iki sustojimo. Šoktelėjimo (bounce) ar elastingo judėjimo efektai keičia kryptį kelis kartus, o to viena cubic-bezier kreivė išreikšti negali – tam reikalingi CSS keyframes arba linear() funkcija su daugeliu taškų.

DUK