Realna števila v ozadju CSS olajšanje
Oblikujte časovno funkcijo CSS cubic-bezier() po meri tako, da povlečete dve kontrolni točki, jo predogledate v živo glede na linearno referenco in nato kopirate pripravljeno vrednost.
Rezultat
Ta stran odpre generator cubic-bezier z že naloženimi x1=0,42, y1=0, x2=0,58, y2=1 — natančnimi kontrolnimi točkami, na katere se razširi ključna beseda CSS za olajšanje. Povlecite ročaj ali neposredno uredite številke in krivulja, predogled animacije in niz, ki ga je mogoče kopirati, se takoj posodobijo.
ease-in-out je ena od petih vgrajenih ključnih besed za merjenje časa CSS in je priljubljena prav zato, ker ta krivulja nežno pospešuje od začetka, drži dokaj enakomeren tempo skozi sredino in se pred koncem umirja nazaj – oblika, ki se bere kot naravna za večino gibanja v uporabniškem vmesniku. Če ga vidimo kot eksplicitne kontrolne točke namesto imena ključne besede, postane očitno, zakaj: y1 je blizu 0 in y2 blizu 1, oba blizu ujemajočega se x, tako da ni prekoračitve v obe smeri.
Uporabite te štiri številke kot izhodišče namesto same ključne besede, kadar koli morate rahlo potisniti občutek – povlecite x1 navzdol za hitrejši začetek ali potisnite y2 nad 1, da to isto obliko spremenite v nežen prestop. Vsaka sprememba takoj posodobi predogled in vrstico cubic-bezier(), ki jo je mogoče kopirati.