Viktiga punkter
- 01Dra de två kontrollpunkt-handtagen för att skulptera lutningskurvan visuellt istället för att gissa numeriska värden.
- 02En live bollanimation spelar tillbaka timingen så du kan känna rörelsen innan du förbinder dig till den.
- 03Alla fem CSS inbyggda förinställningar (ease, linear, ease-in, ease-out, ease-in-out) är tillgängliga som utgångspunkter.
- 04Det cubic-bezier() värdet uppdateras live med två-decimal precision, redo att klistra in i vilken CSS-egenskaper som helst.
Varför anpassade lutningskurvor spelar roll för UI-rörelse
CSS's inbyggda tidsfunktioner — ease, ease-in-out, linear — täcker mycket mark, men varje gränssnittet har ögonblick där standard känns något fel. Ett verktygstips som visas för snappigt, en modal som överskjut på öppen, en framstegsbar som känns mekanisk. Cubic-bezier-kurvor låter dig finjustera rörelse för att känna sig naturligt snarare än mekanisk, men de fyra siffrorna i cubic-bezier(0.4, 0, 0.2, 1) är nästan omöjliga att resonera om direkt.
Handytool's cubic-bezier editor omvandlar dessa siffror till en visuell kurva med två draggbara handtag. Flytta ett handtag och bollanimationen spelar tillbaka omedelbar, så du kan iterera av känsla tills rörelsen matchar din avsikt. Kopiera sedan värdet och släpp det i din CSS — klart.
Hur man designar en CSS-lutningskurva
- 01
Börja från en förinställning
Välj ease, linear, ease-in, ease-out eller ease-in-out som baslinje. Handtagen fäster på rätt positioner för varje förinställning.
- 02
Dra kontrollpunkt-handtagen
Varje handtag kontrollerar en ände av kurvan — starthandtaget formas den inledande accelerationen, sluthandtaget formar den slutliga decelerationen. Att flytta ett handtag byter förinställningen till 'anpassad' automatiskt.
- 03
Se bollanimationen
En boll animerar från vänster till höger med din kurva. Justera längd-skjutreglaget för att förhandsgranska långsam kontra snabba övergångar.
- 04
Experimentera med överskridning
Dra ett Y-axis-handtag ovan 1 eller nedan 0 för att skapa överskridning och underskridning — den 'studsig' effekt som gör en meny snäpp öppen energisk.
- 05
Kopiera CSS-värdet
Klicka Kopiera för att få cubic-bezier() strängen och klistra in den i transition-timing-function eller animation-timing-function i din stilmall.
Kör helt i din webbläsare
Redigeraren är ett själv-innehållet webbläsar-verktyg — inga typsnitt, inga skript och ingen data läses in efter att sidan öppnas. Att dra handtag och förhandsgranska animationer fungerar offline. Den cubic-bezier-formel som används för förhandsgranskning-bollen är samma som webbläsare använder för CSS-övergångar, så vad du ser i redigeraren är precis vad din stilmall kommer att producera.
Det finns ingenting att installera och ingenting att registrera sig för. Utmatningen är ett enkel CSS-värde — klistra in och du är klar.
Cubic-Bezier Editor FAQ
Vad är en cubic-bezier lutningskurva?
Det är en matematisk kurva definierad av två kontrollpunkter som bestämmer hur en CSS-övergång eller animation accelererar över tid. De fyra siffrorna i cubic-bezier(x1, y1, x2, y2) ställer in positionerna för dessa kontrollpunkter.
Varför kan Y-värdena gå ovan 1 eller nedan 0?
Y-värden utanför 0–1 producerar överskridning och underskridning — kurvan gå förbi sitt slutpunkt innan det sätter sig. Detta skapar 'studsiga' lutningskurvor. X-värdena måste stanna i 0–1.
Hur använder jag utmatningen?
Kopiera cubic-bezier(...) strängen och klistra in den i vilken CSS transition-timing-function eller animation-timing-function värde som helst. Det fungerar i alla moderna webbläsare.
Vad betyder ease-in-out faktiskt?
Ease-in-out börjar långsamt, accelererar i mitten och saktar ned i slutet — cubic-bezier(0.42, 0, 0.58, 1). Den speglingar hur riktiga objekt accelererar och decelererar och är standardvalet för de flesta polerad UI-rörelse.
Är bollanimationen förhandsvisningen korrekt för CSS?
Ja — förhandsgranskningen använder samma cubic bezier-formel webbläsare tillämpar på CSS-övergångar. Längdskjutreglaget låter dig känna långsam kontra snabba kurvor innan du förbinder dig.