Cubic-bezier-redigerare

Så använder du cubic-bezier-redigeraren

1. Dra de två handtagen i grafen. P1 (den första kontrollpunkten) formar början av rörelsen, P2 slutet. Tiden går från vänster till höger och förloppet nedifrån och upp.
2. Eller skriv ett värde i Värde för cubic-bezier(): en fullständig cubic-bezier(0.4, 0, 0.2, 1), fyra tal eller ett nyckelord som ease-in-out. Fälten x1, y1, x2 och y2 ändrar en koordinat i taget.
3. Utgå från menyn Förinställningar (CSS-nyckelord, familjerna från sine till back och kurvorna från Material Design) eller från nyckelordsknapparna. När din kurva motsvarar en förinställning visas dess namn bredvid knapparna.
4. Följ Förhandsvisning av animation: punkten på Din kurva och punkten på linear färdas samma sträcka under samma Varaktighet. Använd Pausa/Spela och Börja om för att jämföra dem.
5. Kopiera resultatet från CSS-tidsfunktion, eller kopiera Uppskattning med linear() och välj antal Segment.

Tangentbord: ge ett handtag fokus och använd piltangenterna för att flytta det 0,01, eller 0,1 med Shift.

Om ditt system är inställt på reducerad rörelse startar animationen pausad. Tryck på Spela om du vill köra den ändå.

Vad cubic-bezier() betyder

En easing-funktion i CSS översätter den förflutna tiden i en övergång (0 till 1) till dess förlopp (0 till 1). cubic-bezier(x1, y1, x2, y2) beskriver den översättningen med en kubisk Bézierkurva som börjar i (0, 0), slutar i (1, 1) och dras av två kontrollpunkter, P1 = (x1, y1) och P2 = (x2, y2).

• x-värdena är tider och måste ligga mellan 0 och 1, annars blir funktionen ingen giltig tidskurva. Redigeraren håller dem inom intervallet.
• y-värdena är förlopp och får gå under 0 eller över 1. Ett y över 1 gör att animationen skjuter över målet och kommer tillbaka, som Back-kurvorna; under 0 rör den sig först bakåt.
• En brant lutning betyder snabb rörelse, en flack lutning långsam rörelse. ease-out börjar snabbt och slutar långsamt, vilket känns naturligt för element som kommer in på skärmen. ease-in gör tvärtom och passar element som lämnar skärmen.

CSS-nyckelorden är genvägar: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) och linear = (0, 0, 1, 1). Observera att CSS alltid använder decimalpunkt i värdena.

Uppskattningen med linear()

Den nyare funktionen linear() listar förloppsvärden vid jämnt fördelade tidpunkter, till exempel linear(0, 0.25, 0.5, 0.75, 1), och förbinder dem med raka linjer. Verktyget samplar din kurva (det löser Bézierkurvan för varje tidssteg) och skriver värdena med tre decimaler. Med 20 till 40 segment ser resultatet visuellt identiskt ut med kurvan. Den verkliga fördelen med linear() gäller kurvor som en Bézierkurva inte kan rita, som studsar och fjädrar, men den gör det också möjligt att använda en enda syntax. Den fungerar i Chrome och Edge 113+, Firefox 112+ och Safari 17.2+, så behåll värdet från cubic-bezier() som reserv.