Cubic-bezier editor

Funktioner i Cubic-bezier editor

• 01

  Træk kurven, se bevægelsen

  To trækkbare håndtag styrer begyndelsen og slutningen af bezieren. Den medfølgende kugleanimation afspiller kurven i den varighed du vælger, så du kan forhåndsvise overshoot og ease-out følelse uden at forlade siden.

• 02

  Alle standard forudindstillinger

  Start fra CSS's built-in ease, linear, ease-in, ease-out og ease-in-out — så fintune. Forudindstillings skiftet går tilbage til "custom" automatisk når du flytter et håndtag.

• 03

  Kopier CSS med et klik

  cubic-bezier() værdien opdateres live med to-decimal præcision, klar til at droppe ind i transition-timing-function eller animation-timing-function.

Ofte stillede spørgsmål om Cubic-bezier editor

Hvorfor kan Y-værdier gå over 1 eller under 0?

Bezier kontrol punkter uden for 0–1 intervallet producerer overshoot og undershoot effekter — kurven går forbi sit endepunkt før den stabiliseres. Dette er hvordan "bouncy" ease-kurver laves; X aksen skal stadig blive i 0–1.

Hvordan bruger jeg outputtet?

Kopier cubic-bezier(...) strengen og indsæt den i enhver CSS transition-timing-function eller animation-timing-function værdi. Det fungerer i hver moderne browser.

Er forhåndsvisningen nøjagtig med hvad CSS vil gøre?

Ja — forhåndsvisningen animerer en kugle fra 0 til 100% ved hjælp af samme cubic bezier formel browsere bruger til transitions. Varighedsskyderen lader dig føle langsomme kontra hurtige kurver før du forpligter dig.

Hvad betyder ease-in-out faktisk?

Ease-in-out starter langsomt, accelererer i midten og bremser igen ved slutningen — cubic-bezier(0.42, 0, 0.58, 1) kurven. Det er standard for de fleste polerede UI bevægelser fordi det afspejler hvordan rigtige fysiske objekter accelererer og decelererer.