CSS Easing-generator
Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
Vad är en easing-funktion i CSS?
En easing-funktion styr i vilken takt en animering eller övergång fortgår över tiden. Ett element behöver inte röra sig med konstant hastighet: det kan starta långsamt, accelerera, skjuta förbi målet och sedan stabiliseras. I CSS ställs den in med transition-timing-function eller animation-timing-function.
Vad betyder de fyra siffrorna i cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definierar en kurva via två kontrollpunkter. Den första formar rörelsens början, den andra slutet. X representerar tiden på en skala från 0 till 1, och Y representerar framsteg: 0 är startvärdet och 1 slutvärdet.
Varför får Y gå utanför 0 till 1 medan X inte får det?
X avbildas på verklig tid; ett värde under 0 eller över 1 skulle bryta kausaliteten och är förbjudet i specifikationen. Y är fritt: över 1 skjuter man förbi målet, under 0 backar man först — så skapar Back-förinställningarna sin studskänsla.
Vad är skillnaden mellan ease, ease-in och ease-out?
ease är webbläsarens standard med mjuk start och mjuk landning; ease-in startar långsamt och slutar snabbt; ease-out startar snabbt och bromsar in; ease-in-out kombinerar båda. Generatorn innehåller dessutom förinställningarna sine, quad, cubic, quart, expo, back och material — 18 totalt.
Hur fungerar bollförhandsvisningen?
Två bollar går i loop under den tid du ställer in. Den övre bollen rör sig alltid med en linjär funktion som referens, den undre följer din kurva. Avståndet mellan dem som växer och krymper visar exakt vad din easing ändrar.
Var klistrar jag in det genererade värdet?
Använd det som värde för transition-timing-function eller animation-timing-function, t.ex. transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Verktyget matar ut den bara funktionen cubic-bezier(...), redo för vilken regel som helst.
Påverkar easing-funktionen animeringens prestanda?
Tidsfunktionen i sig är gratis: den mappar bara om framsteg över tid. Prestandan beror på vilka egenskaper du animerar: transform och opacity är GPU-vänliga, medan layoutegenskaper som width eller top orsakar dyra reflows oavsett easing.
Kan jag skapa en riktig studs- eller elastikeffekt?
En ensam cubic-bezier kan skjuta förbi målet en gång men kan inte åstadkomma de flerfaldiga stötarna i en äkta studs- eller elastisk easing. För det kedjar du flera keyframes i @keyframes eller använder Web Animations API; det enskilda mjuka överskjutandet är precis vad cubic-bezier är bra på och vad det här verktyget erbjuder.
Laddas det jag gör här upp?
Nej. Kurvan ritas på en lokal canvas och förhandsanimationen körs helt i din webbläsare. Ingenting skickas till någon server, så generatorn fungerar även offline efter att sidan laddats.
Hur man använder CSS Easing-generator
Forma CSS-easingkurvor visuellt i stället för att gissa tal. Dra kontrollpunkterna, jämför din rörelse med en linjär referens och kopiera den färdiga cubic-bezier:n med ett klick. Allt körs lokalt i din webbläsare.
- Välj en av de 18 förinställningarna som startpunkt, till exempel Ease Out, Expo Out eller Back Out.
- Dra de två handtagen på kurvan: X-axeln är tid och måste hållas mellan 0 och 1, Y-axeln är framsteg och får skjuta över.
- Finjustera de exakta P1- och P2-koordinaterna med talinmatningarna om du behöver precision.
- Ställ in längdreglaget och titta på de två loopande bollarna — den ihåliga är alltid linjär, den fyllda använder din kurva.
- Kopiera det genererade cubic-bezier-värdet till transition-timing-function eller animation-timing-function.
Skjut ett Y-handtag över 1 för en säker överskjutning, som cubic-bezier(0.34, 1.56, 0.64, 1) — det får knappar och kort att kännas spänstiga utan några keyframes.
Relaterade verktyg
- CSS-gradientgenerator Skapa fantastiska CSS-gradienter visuellt. Generera linjära, radiella och koniska gradienter med flera färgstopp, vinklar och positioner. Kopiera produktionsklar CSS-kod omedelbart.
- CSS-loader Generator Gratis CSS-loader-generator: tio laddningsspinners i ren CSS med livekontroll av storlek, hastighet, tjocklek och färg, samt färdig HTML och CSS att kopiera.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formge polygon-, cirkel-, ellips- och inset-former med dragbara punkter, liveförhandsvisning och CSS-kod med ett klick.
- CSS-förskönare Formatera och försköna CSS-kod direkt. Konvertera minifierad CSS till läsbar kod med anpassningsbara alternativ.
- CSS-minifierare Gratis online CSS-minifierare. Komprimera och optimera CSS-kod omedelbart genom att ta bort mellanslag, kommentarer och onödiga tecken. Minska filstorleken för snabbare webbprestanda.