CSS Cubic Bezier-generator

CSS-övergångar och tidsfunktioner med cubic-bezier()

När du skapar animationer och övergångar i CSS styr en tidsfunktion hur rörelsen utvecklar sig över tid. Istället för att en rörelse sker helt linjärt och stelt, kan du använda tidsfunktioner för att accelerera, retardera eller skapa mer dynamiska effekter. Detta styrs i CSS via egenskaperna transition-timing-function och animation-timing-function.

Grunden för dessa tidsfunktioner är en matematisk cubic Bezier-kurva. Kurvan definieras av fyra värden i funktionen cubic-bezier(x1, y1, x2, y2). Dessa värden representerar koordinaterna för två kontrollpunkter som drar och böjer kurvan mellan startpunkten (nere till vänster) och slutpunkten (uppe till höger). Genom att justera dessa kontrollpunkter kan du finjustera animationens hastighet och acceleration under hela dess förlopp.

Kontrollpunkternas roll och koordinatsystemet

Kurvan ritas i ett koordinatsystem där den horisontella axeln representerar tid och den vertikala axeln representerar animationens förlopp. Tiden fortskrider från vänster till höger, och förloppet går uppåt.

De två kontrollpunkterna som formar kurvan har specifika regler för sina koordinater:

• Första kontrollpunkt (x1, y1): Styr kurvans formning i början av animationen.
• Andra kontrollpunkt (x2, y2): Styr kurvans formning mot slutet av animationen.

För X-värdena (x1 och x2) gäller en strikt begränsning: de måste ligga mellan 0 och 1. Detta beror på att tiden inte kan gå bakåt eller hoppa framåt utanför animationens tidsspann. Y-värdena (y1 och y2) har däremot större frihet och kan ställas in mellan -0.70 och 1.70. Genom att dra Y-värdena under 0 eller över 1 kan du skapa effekter där animationen dras tillbaka innan den startar, eller skjuter över sitt slutmål innan den landar.

Hur generatorn fungerar och hanterar indata

Med detta verktyg kan du visuellt skapa en CSS-övergångskurva genom att dra i de två handtagen som representerar kontrollpunkterna. Samtidigt som du justerar kurvan rör sig en punkt längs din kurva bredvid en punkt som rör sig i en stadig, linjär takt. Detta gör att du direkt kan jämföra och förhandsgranska din anpassade rörelse mot en konstant hastighet.

Verktyget har inbyggda regler för att hantera inmatning av värden i fälten för kontrollpunkterna:

• Gränser för X: Numeriska värden begränsas till intervallet 0 till 1. Om du exempelvis skriver in 9 för "Första kontrollpunkt" och sedan klickar utanför fältet så att det förlorar fokus, ändras värdet automatiskt till 1.
• Gränser för Y: Numeriska värden begränsas till intervallet -0.70 till 1.70.
• Återställning: Om du tömmer ett numeriskt inmatningsfält och fältet förlorar fokus, återställs det till det senast giltiga värdet.
• Tomma fält: Tomma eller icke-numeriska inmatningar väntar på att ett fullständigt och giltigt värde skrivs in.
• Tangentbordsstyrning: Om du fokuserar på ett handtag för en kontrollpunkt och trycker på vänster piltangent, ändras dess värde (till exempel till 0.99).

När du har format din kurva kan du kopiera det genererade cubic-bezier(x1, y1, x2, y2)-värdet. När kopieringen lyckas visas statusen "Copied". Det finns ingen specifik ruta eller meddelande för misslyckad kopiering.

Förinställningar och avancerade rörelseeffekter

För att underlätta arbetet innehåller verktyget ett antal förinställningar under rubriken "Förinställningar". Dessa inkluderar de vanliga CSS-nyckelorden samt mer avancerade kurvor:

• Standardnyckelord: "ease", "ease-in", "ease-out" och "ease-in-out". Dessa motsvarar fasta cubic-bezier-värden som används frekvent i webbdesign.
• Back-förinställningar: "Back In", "Back Out" och "Back In-Out". Dessa används för att skapa effekter som förbereder eller skjuter över målet. Förinställningen "Back Out" sätter exempelvis värdet till cubic-bezier(0.34, 1.56, 0.64, 1).

Genom att använda Y-värden utanför intervallet 0 till 1 kan du uppnå så kallade "overshoot"- (överskjutande) och "pull-back"- (tillbakadragande) effekter. Detta ger animationen en mer organisk känsla, då elementet kan backa något innan det skjuter iväg, eller glida förbi sin slutposition för att sedan mjukt fjädra tillbaka.

Begränsningar med en enskild cubic-bezier

Även om en cubic Bezier-kurva är kraftfull, har den matematiska begränsningar. En enskild cubic-bezier()-funktion kan förbereda en rörelse och skjuta över målet, men den kan bara röra sig i en huvudsaklig riktning och sedan landa.

Det innebär att du inte kan använda en enskild cubic-bezier() för att skapa komplexa effekter som ändrar riktning flera gånger, såsom en studsande boll (bounce) eller en elastisk svängning som pendlar fram och tillbaka. För att uppnå sådana effekter krävs mer avancerade metoder, som att dela upp animationen i flera CSS-keyframes eller använda andra funktioner.

Integritet och lokal körning

När du använder denna generator sker all beräkning och rendering lokalt. Kurvan ritas direkt i din webbläsare. Inget av det du ställer in eller matar in i verktyget laddas upp till BroBroGo.

---

Vanliga frågor

Vad betyder de två handtagen och de fyra siffrorna?

Kurvan löper från nere till vänster (starten) till uppe till höger (slutet), där tiden går från vänster till höger och förloppet går uppåt. De två handtagen är kontrollpunkterna som böjer den – varje punkt har ett X och ett Y, så tillsammans blir de cubic-bezier(x1, y1, x2, y2). X håller sig alltid mellan 0 och 1, medan Y kan gå över toppen eller under botten för att få rörelsen att skjuta över målet eller dras tillbaka innan den landar.

Hur använder jag värdet i min CSS?

Kopiera cubic-bezier() och klistra in det där du anger en tidsfunktion – transition-timing-function, animation-timing-function eller i kortformen, t.ex. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Nyckelorden ease, ease-in, ease-out och ease-in-out är bara fasta cubic-bezier-kurvor, så om du väljer en av de förinställningarna ser du det exakta värdet bakom nyckelordet.

Kan den skapa en studsande eller elastisk effekt?

Inte på egen hand. En enskild cubic-bezier kan förbereda rörelsen och skjuta över målet – "back"-förinställningarna drar ett handtag utanför boxen för att göra just det – men den kan bara röra sig åt ett håll och sedan landa. Studs (bounce) och elastiska effekter ändrar riktning flera gånger, vilket en enskild cubic-bezier inte kan uttrycka; för det behövs CSS-keyframes eller funktionen linear() med flera stopp.