Generator za CSS Cubic Bezier
Povlecite ročici, da oblikujete krivuljo prehoda, opazujte gibanje pike v primerjavi z enakomernim in kopirajte vrednost cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Krivulja se izriše neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo.
Pogosta vprašanja
Kaj pomenita dve ročici in štiri številke?
Krivulja poteka od spodaj levo (začetek) do zgoraj desno (konec), pri čemer čas teče od leve proti desni, napredek pa gre navzgor. Ročici sta kontrolni točki, ki jo upogibata — vsaka ima koordinati X in Y, tako da skupaj tvorita cubic-bezier(x1, y1, x2, y2). X ostaja med 0 in 1, medtem ko lahko Y preseže vrh ali dno, da ustvari prekoračitev gibanja ali umik, preden se umiri.
Kako uporabim to vrednost v svojem CSS?
Kopirajte cubic-bezier() in ga vstavite povsod, kjer se uporablja časovna funkcija — transition-timing-function, animation-timing-function ali v skrajšani obliki, npr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ključne besede ease, ease-in, ease-out in ease-in-out so le fiksne krivulje cubic-bezier, zato vam izbira ene od teh prednastavitev prikaže natančno vrednost za to ključno besedo.
Ali lahko ustvari učinek odboja ali elastičnosti?
Samo po sebi ne. Ena krivulja cubic-bezier lahko ustvari učinek pričakovanja in prekoračitve — prednastavitve "back" potegnejo eno ročico čez polje, da dosežejo prav to — vendar se lahko premakne le v eno smer in se nato umiri. Učinka odboja (bounce) ali elastičnosti večkrat spremenita smer, česar ena sama krivulja cubic-bezier ne more izraziti; za to potrebujete CSS ključne sličice (keyframes) ali funkcijo linear() z več točkami.