CSS Easing-generator
Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
Hva er en easing-funksjon i CSS?
En easing-funksjon styrer i hvilket tempo en animasjon eller overgang skrider frem over tid. Et element trenger ikke bevege seg med konstant fart: det kan starte langsomt, akselerere, skyte forbi målet og deretter stabilisere seg. I CSS settes den med transition-timing-function eller animation-timing-function.
Hva betyr de fire tallene i cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definerer en kurve via to kontrollpunkter. Det første punktet former begynnelsen av bevegelsen, det andre slutten. X representerer tiden på en skala fra 0 til 1, og Y representerer fremdrift: 0 er startverdien og 1 sluttverdien.
Hvorfor kan Y gå utenfor 0 til 1 mens X ikke kan?
X avbildes på virkelig tid; en verdi under 0 eller over 1 ville bryte kausaliteten og er forbudt i spesifikasjonen. Y er fritt: over 1 skyter du forbi målet, under 0 trekker du deg først tilbake — slik får Back-forhåndsinnstillingene sin sprettfølelse.
Hva er forskjellen mellom ease, ease-in og ease-out?
ease er nettleserens standard med myk start og myk landing; ease-in starter langsomt og slutter raskt; ease-out starter raskt og faser ut; ease-in-out kombinerer begge. Generatoren inneholder i tillegg forhåndsinnstillingene sine, quad, cubic, quart, expo, back og material — 18 totalt.
Hvordan fungerer ballforhåndsvisningen?
To baller går i løkke gjennom varigheten du setter. Det øverste ballet beveger seg alltid med en lineær funksjon som referanse, det nederste følger din kurve. Avstanden mellom dem som vokser og krymper viser nøyaktig hva easingen din endrer.
Hvor limer jeg inn den genererte verdien?
Bruk den som verdi for transition-timing-function eller animation-timing-function, f.eks. transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Verktøyet gir ut den bare funksjonen cubic-bezier(...), klar for enhver regel.
Påvirker easing-funksjonen animasjonsytelsen?
Tidsfunksjonen i seg selv er gratis: den kartlegger bare fremdrift over tid på nytt. Ytelsen avhenger av hvilke egenskaper du animerer: transform og opacity er GPU-vennlige, mens layoutegenskaper som width eller top utløser dyre reflows uansett easing.
Kan jeg lage en ekte sprett- eller elastiskeffekt?
En enkelt cubic-bezier kan overstige målet én gang, men kan ikke lage de flerfoldige sprettene i en ekte bounce- eller elastisk easing. Til det lenker du flere keyframes i @keyframes eller bruker Web Animations API; det enkelte myke overstiget er akkurat det cubic-bezier er god på og dette verktøyet tilbyr.
Blir det jeg gjør her lastet opp?
Nei. Kurven tegnes på et lokalt canvas og forhåndsanimasjonen kjører helt i nettleseren din. Ingenting sendes til noen server, så generatoren fungerer også frakoblet etter at siden er lastet.
Slik bruker du CSS Easing-generator
Form CSS-easing-kurver visuelt i stedet for å gjette tall. Dra kontrollpunktene, sammenlign bevegelsen din med en lineær referanse og kopier den ferdige cubic-bezier-en med ett klikk. Alt kjøres lokalt i nettleseren din.
- Velg en av de 18 forhåndsinnstillingene som utgangspunkt, for eksempel Ease Out, Expo Out eller Back Out.
- Dra de to håndtakene på kurven: X-aksen er tid og må holde seg mellom 0 og 1, Y-aksen er fremdrift og kan overskride.
- Finjuster de nøyaktige P1- og P2-koordinatene med tallinnskrivingene hvis du trenger presisjon.
- Still inn varighetsglidebryteren og se på de to løpende ballene — den hule er alltid lineær, den fylte bruker kurven din.
- Kopier den genererte cubic-bezier-verdien inn i transition-timing-function eller animation-timing-function.
Skyv et Y-håndtak over 1 for en selvsikker overskridelse, som cubic-bezier(0.34, 1.56, 0.64, 1) — det gjør knapper og kort fjæraktige uten noen nøkkelbilder.
Relaterte verktøy
- CSS-gradientgenerator Lag fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere fargestopp, vinkler og posisjoner. Kopier produksjonsklar CSS-kode umiddelbart.
- CSS-loader-generator Gratis CSS-loader-generator: ti lastespinners i ren CSS med live kontroll av størrelse, hastighet, tykkelse og farge, og klar HTML og CSS å kopiere.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formgi polygon-, sirkel-, ellipse- og insett-former med flyttbare punkter, forhåndsvisning og CSS-kode med ett klikk.
- CSS-forskønner Formater og forskjønn CSS-kode umiddelbart. Konverter minifisert CSS til lesbar kode med tilpassbare alternativer.
- CSS-minifierer Gratis online CSS-minifierer. Komprimer og optimaliser CSS-kode umiddelbart ved å fjerne mellomrom, kommentarer og unødvendige tegn. Reduser filstørrelsen for raskere webytelse.