CSS Cubic Bezier ģenerators
Velciet abus rokturus, lai veidotu paātrinājuma līkni, vērojiet punkta kustību pret vienmērīgu kustību un nokopējiet cubic-bezier() vērtību.
cubic-bezier(0.25, 0.1, 0.25, 1)Līkne tiek zīmēta tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.
BUJ
Ko nozīmē abi rokturi un četri skaitļi?
Līkne stiepjas no apakšējā kreisā stūra (sākums) līdz augšējam labajam (beigas), kur laiks iet no kreisās uz labo pusi, bet progress — uz augšu. Abi rokturi ir vadības punkti, kas to izliec — katram ir X un Y, tāpēc kopā tie veido cubic-bezier(x1, y1, x2, y2). X paliek starp 0 un 1, savukārt Y var iet virs augšējās vai zem apakšējās malas, lai radītu pārlēkšanas vai atpakaļvilkšanas efektu pirms apstāšanās.
Kā es varu izmantot šo vērtību savā CSS?
Nokopējiet cubic-bezier() un ievietojiet to jebkur, kur nepieciešama laika funkcija (timing function) — transition-timing-function, animation-timing-function vai saīsinātajā pierakstā, piemēram, transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Atslēgvārdi ease, ease-in, ease-out un ease-in-out ir tikai fiksētas cubic-bezier līknes, tāpēc, izvēloties kādu no šīm sagatavēm, tiks parādīta precīza vērtība aiz šī atslēgvārda.
Vai ar to var izveidot atlekšanas vai elastības efektu?
Ne gluži paša spēkiem. Viena cubic-bezier līkne var paredzēt kustību un pārsniegt mērķi (pārlēkt pāri) — "back" sagataves pavelk vienu rokturi ārpus rāmja, lai to izdarītu —, taču tā var kustēties tikai vienā virzienā un tad apstāties. Atlekšanas (bounce) un elastīgie efekti maina virzienu vairākas reizes, ko viena cubic-bezier līkne nespēj izteikt; tiem ir nepieciešami CSS keyframes vai linear() funkcija ar daudziem punktiem.