Cubic-bezier-editor

Funksjoner i Cubic-bezier-editor

• 01

  Dra kurven, se bevegelsen

  To drabare håndtak kontrollerer starten og slutten av bezieren. Den medfølgende ballanimasjonen spiller kurven med den varigheten du velger, slik at du kan forhåndsvise overshoot og ease-out-følelse uten å forlate siden.

• 02

  Alle standard forhåndsinnstillingene

  Start fra CSSs innebygde ease, linear, ease-in, ease-out og ease-in-out — så juster. Forhåndsinnstillingen byttes tilbake til "custom" automatisk når du drar et håndtak.

• 03

  Kopier CSS med ett klikk

  Cubic-bezier()-verdien oppdateres live med to desimalers presisjon, klar til å droppe inn i transition-timing-function eller animation-timing-function.

Vanlige spørsmål om Cubic-bezier-editor

Hvorfor kan Y-verdiene gå over 1 eller under 0?

Bezier-kontrollpunkter utenfor 0–1-området produserer overshoot- og undershoot-effekter — kurven går forbi endepunktet før den stilles inn. Slik lages "sprettende" easing-kurver; X-aksen må fortsatt bli i 0–1.

Hvordan bruker jeg utgangen?

Kopier cubic-bezier(...)-strengen og lim den inn i hvilken som helst CSS transition-timing-function eller animation-timing-function-verdi. Det fungerer i alle moderne nettlesere.

Er forhåndsvisningen nøyaktig i forhold til hva CSS gjør?

Ja — forhåndsvisningen animerer en ball fra 0 til 100% ved hjelp av samme cubic bezier-formel som nettlesere bruker for overganger. Varighet-skyveren lar deg føle sakte mot raske kurver før du forplikter deg.

Hva betyr ease-in-out egentlig?

Ease-in-out starter sakte, akselererer i midten og bremser ned igjen på slutten — cubic-bezier(0.42, 0, 0.58, 1)-kurven. Det er standarden for mest polerte UI-bevegelser fordi det gjenspeiler hvordan virkelige fysiske objekter akselererer og bremserer.