CSS Cubic Bezier generaator
Lohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.
cubic-bezier(0.25, 0.1, 0.25, 1)Kõver joonistatakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.
KKK
Mida tähendavad kaks pidet ja neli numbrit?
Kõver kulgeb all-vasakult (algusest) ülal-paremale (lõppu), kus aeg liigub vasakult paremale ja progress alt üles. Kaks pidet on juhtpunktid, mis seda painutavad – mõlemal on X ja Y, moodustades koos cubic-bezier(x1, y1, x2, y2). X jääb vahemikku 0 kuni 1, samas kui Y võib minna ülemisest piirist kõrgemale või alumisest madalamale, et tekitada liikumise ülehüpe või tagasitõmme enne kohalejõudmist.
Kuidas kasutada väärtust oma CSS-is?
Kopeerige cubic-bezier() ja asetage see mistahes kohta, kuhu sobib ajastusfunktsioon — transition-timing-function, animation-timing-function või lühivorm, nt transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Võtmesõnad ease, ease-in, ease-out ja ease-in-out on lihtsalt fikseeritud cubic-bezier kõverad, seega nende eelseadistuste valimine näitab teile täpset väärtust võtmesõna taga.
Kas sellega saab luua põrkumise või elastse efekti?
Mitte iseseisvalt. Üksik cubic-bezier suudab teha eel- ja ülehüppeid – „back“ eelseadistused tõmbavad ühe pideme kastist välja just selle saavutamiseks –, kuid see saab liikuda ainult ühes suunas ja seejärel peatuda. Põrkumise (bounce) ja elastse efekti puhul muutub suund mitu korda, mida ükski cubic-bezier ei suuda väljendada; nende jaoks on vaja CSS keyframes-kaadreid või paljude peatustega linear() funktsiooni.