Vigtigste punkter
- 01Træk de to kontrol-punkt håndtag for at forme easing-kurven visuelt i stedet for at gætte numeriske værdier.
- 02En live kugle-animering afspiller timing, så du kan føle bevægelsen, før du forpligter dig til den.
- 03Alle fem CSS indbygget forudindstillinger (ease, linear, ease-in, ease-out, ease-in-out) er tilgængelige som udgangspunkter.
- 04cubic-bezier() værdien opdateres live med to-decimal præcision, klar til at indsætte i enhver CSS-egenskab.
Hvorfor brugerdefineret Easing Curves betyder for UI Bevægelse
CSS's indbyggede timing-funktioner — ease, ease-in-out, linear — dækker meget grund, men enhver UI har øjeblikke, hvor standard-stillingen føles let forkert. Et tooltip, der vises for snappeligt, en modal, der skyder ud på åbning, en fremskridtslinje, der føles mekanisk. Cubic-bezier kurver lader dig tune bevægelse til at føles naturlig i stedet for mekanisk, men de fire tal i cubic-bezier(0.4, 0, 0.2, 1) er næsten umulige at ræsonnere om direkte.
Handytool's cubic-bezier editor gør disse tal til en visuelt kurve med to trækkelige håndtag. Flyt et håndtag, og kugle-animationen afspilles øjeblikkeligt, så du kan iterere efter følelse, indtil bevægelsen matcher din hensigt. Kopiér derefter værdien og slip det i din CSS — færdig.
Sådan designer du en CSS Easing Curve
- 01
Start fra en forudindstilling
Vælg ease, linear, ease-in, ease-out eller ease-in-out som en baseline. Håndtagene snap til de rigtige positioner for hver forudindstilling.
- 02
Træk kontrol-punkt håndtagene
Hvert håndtag styr én ende af kurven — start håndtaget former den initiale acceleration, slut håndtaget former den endelige deceleration. At flytte et håndtag slår forudindstillingen til 'custom' automatisk.
- 03
Se kugle-animationen
En kugle animerer fra venstre til højre ved hjælp af din kurve. Juster varighed-skyderen for at forhåndsvisere langsomme vs hurtige overgange.
- 04
Eksperiment med overshoot
Træk et Y-akse håndtag over 1 eller under 0 for at skabe overshoot og undershoot — 'elastisk' effekten, der gør en menu snap åben energisk.
- 05
Kopier CSS-værdien
Klik Copy for at få cubic-bezier() strengen og indsæt den i transition-timing-function eller animation-timing-function i dit stylesheet.
Kører helt i din Browser
Editoren er et selvbetjent browser-værktøj — ingen skrifttyper, ingen scripts og ingen data indlæses efter siden åbnes. At trække håndtag og forhåndsvisning animationer fungerer offline. Cubic-bezier formlen, der bruges til forhåndsvisning-kuglen, er den samme som browsere bruger til CSS-overgange, så hvad du ser i editoren er præcist hvad dit stylesheet vil producere.
Der er intet at installere og intet at tilmelde sig. Output er en enkelt CSS-værdi — indsæt den og du er færdig.
Cubic-Bezier Editor Ofte Stillede Spørgsmål
Hvad er en cubic-bezier easing curve?
Det er en matematisk kurve defineret af to kontrol-punkter, der bestemmer, hvordan en CSS overgang eller animering accelererer over tid. De fire tal i cubic-bezier(x1, y1, x2, y2) indstiller positionerne for disse kontrol-punkter.
Hvorfor kan Y-værdier gå over 1 eller under 0?
Y-værdier uden for 0–1 producerer overshoot og undershoot — kurven går ud over sit slutpunkt, før det sætter sig. Dette skaber 'elastisk' easing kurver. X-værdier skal forblive inden for 0–1.
Hvordan bruger jeg outputtet?
Kopier cubic-bezier(...) strengen og indsæt den i en hvilken som helst CSS transition-timing-function eller animation-timing-function værdi. Det fungerer i alle moderne browsere.
Hvad betyder ease-in-out faktisk?
Ease-in-out starter langsomt, accelererer i midten og sænker ved slutningen — cubic-bezier(0.42, 0, 0.58, 1). Det spejler hvordan rigtige objekter accelererer og decelererer, og er standard-valget for mest poleret UI-bevægelse.
Er kugle-animationen forhåndsvisning nøjagtig til CSS?
Ja — forhåndsvisningen bruger den samme cubic bezier formel, browsere anvender på CSS overgange. Varighed-skyderen lader dig føle langsomme vs hurtige kurver, før du forpligter dig.