CSS Easing-generator
Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
Hvad er en easing-funktion i CSS?
En easing-funktion styr i hvilket tempo en animation eller overgang skrider frem over tid. Et element behøver ikke bevæge sig med konstant fart: det kan starte langsomt, accelerere, skyde forbi målet og derefter stabilisere sig. I CSS sættes den med transition-timing-function eller animation-timing-function.
Hvad betyder de fire tal i cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definerer en kurve via to kontrollpunkter. Det første punkt former bevægelsens begyndelse, det andet slutningen. X repræsenterer tiden på en skala fra 0 til 1, og Y repræsenterer fremdrift: 0 er startværdien og 1 slutværdien.
Hvorfor må Y gå uden for 0 til 1, mens X ikke må?
X afbildes på virkelig tid; en værdi under 0 eller over 1 ville bryde kausaliteten og er forbudt i specifikationen. Y er frit: over 1 skyder du forbi målet, under 0 trækker du dig først tilbage — sådan får Back-forudindstillingerne deres stødfølelse.
Hvad er forskellen på ease, ease-in og ease-out?
ease er browserens standard med blød start og blød landing; ease-in starter langsomt og slutter hurtigt; ease-out starter hurtigt og bremser op; ease-in-out kombinerer begge. Generatoren indeholder desuden forudindstillingerne sine, quad, cubic, quart, expo, back og material — 18 i alt.
Hvordan fungerer boldforhåndsvisningen?
To bolde går i loop gennem den varighed, du sætter. Den øverste bold bevæger sig altid med en lineær funktion som reference, den nederste følger din kurve. Afstanden mellem dem, der vokser og krymper, viser præcis, hvad din easing ændrer.
Hvor indsætter jeg den genererede værdi?
Brug den som værdi for transition-timing-function eller animation-timing-function, fx transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Værktøjet udsender den nøgne funktion cubic-bezier(...), klar til enhver regel.
Påvirker easing-funktionen animationens ydeevne?
Tidsfunktionen i sig selv er gratis: den ommapper kun fremdrift over tid. Ydeevnen afhænger af, hvilke egenskaber du animerer: transform og opacity er GPU-venlige, mens layoutegenskaber som width eller top udløser dyre reflows uanset easing.
Kan jeg lave en ægte stød- eller elastikeffekt?
En enkelt cubic-bezier kan skyde forbi målet én gang, men kan ikke lave de mange genoptagelser, en ægte bounce- eller elastisk easing har. Til det kæder du flere keyframes i @keyframes eller bruger Web Animations API; det enkelte bløde overstig er præcis, hvad cubic-bezier er god til, og hvad dette værktøj tilbyder.
Bliver det, jeg gør her, uploadet?
Nej. Kurven tegnes på et lokalt canvas, og forhåndsanimationen kører helt i din browser. Intet sendes til nogen server, så generatoren virker også offline, efter siden er indlæst.
Sådan bruges CSS Easing-generator
Formgiv CSS-easing-kurver visuelt i stedet for at gætte tal. Træk kontrollpunkterne, sammenlign din bevægelse med en lineær reference og kopiér den færdige cubic-bezier med ét klik. Alt kører lokalt i din browser.
- Vælg en af de 18 forudindstillinger som udgangspunkt, f.eks. Ease Out, Expo Out eller Back Out.
- Træk de to håndtag på kurven: x-aksen er tid og skal holde sig mellem 0 og 1, y-aksen er fremdrift og må overskride.
- Finjuster de nøjagtige P1- og P2-koordinater med talfelterne, hvis du har brug for præcision.
- Indstil varighedsskyderen og se på de to kørende bolde — den hule er altid lineær, den fyldte bruger din kurve.
- Kopiér den genererede cubic-bezier-værdi ind i transition-timing-function eller animation-timing-function.
Skub et y-håndtag over 1 for en selvsikker overskridelse, f.eks. cubic-bezier(0.34, 1.56, 0.64, 1) — det får knapper og kort til at føles fjedrende uden nogle keyframes.
Relaterede værktøjer
- CSS-gradientgenerator Opret fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere farvestop, vinkler og positioner. Kopier produktionsklar CSS-kode øjeblikkeligt.
- CSS-loader-generator Gratis CSS-loader-generator: ti loaderspinners i ren CSS med live styring af størrelse, hastighed, tykkelse og farve samt klar HTML og CSS til kopiering.
- Border-radius Generator Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Design polygon-, cirkel-, ellipse- og inset-former med trkbare punkter, live forhåndsvisning og CSS-kode med ét klik.
- CSS-forskønner Formatér og forskøn CSS-kode øjeblikkeligt. Konverter minifieret CSS til læsbar kode med justerbare muligheder.
- CSS-minifierer Gratis online CSS-minifierer. Komprimer og optimer CSS-kode øjeblikkeligt ved at fjerne mellemrum, kommentarer og unødvendige tegn. Reducer filstørrelsen for hurtigere web-ydelse.