Generátor CSS Cubic Bezier
Ťahaním dvoch tiahel vytvarujte krivku plynulosti, sledujte pohyb bodu v porovnaní s rovnomerným a skopírujte hodnotu cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Krivka sa vykresľuje priamo vo vašom prehliadači. Nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo.
Časté otázky
Čo znamenajú dve tiahla a štyri čísla?
Krivka prebieha zľava dole (začiatok) doprava hore (koniec), pričom čas plynie zľava doprava a priebeh stúpa nahor. Dve tiahla sú riadiace body, ktoré ju ohýbajú – každé má súradnice X a Y, takže spoločne tvoria cubic-bezier(x1, y1, x2, y2). Súradnica X zostáva v rozmedzí 0 až 1, zatiaľ čo Y môže ísť nad horný okraj alebo pod dolný okraj, čím sa vytvorí prekmit alebo spätný pohyb pred ustálením.
Ako použijem túto hodnotu vo svojom CSS?
Skopírujte cubic-bezier() a vložte ho všade tam, kde sa používa časová funkcia – transition-timing-function, animation-timing-function alebo skrátený zápis, napr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Kľúčové slová ease, ease-in, ease-out a ease-in-out sú len pevne stanovené krivky cubic-bezier, takže výberom jednej z týchto predvolieb uvidíte presnú hodnotu na pozadí.
Dá sa pomocou nej vytvoriť efekt odrazu alebo pružnosti?
Samotná nie. Jedna krivka cubic-bezier dokáže vytvoriť efekt predvídania a prekmitu – predvoľby „back“ presahujú rámec boxu presne na tento účel – ale dokáže sa pohybovať len jedným smerom a potom sa ustáliť. Efekty ako odraz (bounce) alebo pružnosť (elastic) menia smer viackrát, čo jedna krivka cubic-bezier nedokáže vyjadriť; na to sú potrebné CSS kľúčové snímky (keyframes) alebo funkcia linear() s viacerými bodmi.