Cubic-bezier-editor

Funktioner i Cubic-bezier-editor

• 01

  Dra kurvan, se rörelsen

  Två dragbara handtag styr början och slutet på bezier-kurvan. Den medföljande bollanimationen spelar kurvan på den varaktighet du väljer, så du kan förhandsgranska överskott och ease-out-känsla utan att lämna sidan.

• 02

  Alla standardförinställningar

  Börja från CSS:s inbyggda ease, linear, ease-in, ease-out och ease-in-out — justera sedan. Förinställningsväxlaren byter tillbaka till "anpassad" automatiskt när du flyttar ett handtag.

• 03

  Kopiera CSS med ett klick

  cubic-bezier()-värdet uppdateras live med två decimalprecision, redo att släppa in i transition-timing-function eller animation-timing-function.

Vanliga frågor om Cubic-bezier-editor

Varför kan Y-värdena gå över 1 eller under 0?

Bezier-kontrollpunkter utanför 0–1-intervallet producerar överskott och underskott-effekter — kurvan går förbi sin slutpunkt innan den sätter sig. Så "studsiga" easing-kurvor är gjorda; X-axeln måste fortfarande stanna i 0–1.

Hur använder jag utmatningen?

Kopiera cubic-bezier(...)-strängen och klistra in den i valfritt CSS transition-timing-function eller animation-timing-function-värde. Det fungerar i alla moderna webbläsare.

Är förhandsvisningen korrekt för vad CSS gör?

Ja — förhandsvisningen animerar en boll från 0 till 100 % med samma kubiska bezierformel som webbläsare använder för övergångar. Varaktighetskjutreglaget låter dig känna långsamma vs snabba kurvor innan du utför åtgärd.

Vad betyder ease-in-out faktiskt?

Ease-in-out börjar långsamt, accelererar i mitten och saktar ned igen i slutet — cubic-bezier(0.42, 0, 0.58, 1)-kurvan. Det är standarden för de flesta polerad UI-rörelse eftersom det speglar hur verkliga fysiska objekt accelererar och decelererar.