CSS Cubic Bezier-generator

Dra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.

Forhåndsinnstillinger
Kontrollpunkter
Første kontrollpunkt
Andre kontrollpunkt
Forhåndsvisning
din kurve
linear
Verdi
cubic-bezier(0.25, 0.1, 0.25, 1)
Dra i et håndtak eller velg en forhåndsinnstilling for å forme kurven.

Kurven tegnes direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hva betyr de to håndtakene og de fire tallene?

Kurven går fra nede til venstre (starten) til oppe til høyre (slutten), der tiden går fra venstre til høyre og fremdriften går oppover. De to håndtakene er kontrollpunktene som bøyer kurven — hver har en X- og en Y-verdi, slik at de til sammen utgjør cubic-bezier(x1, y1, x2, y2). X må være mellom 0 og 1, mens Y kan gå over toppen eller under bunnen for å få bevegelsen til å skyte over eller trekke seg tilbake før den faller til ro.

Hvordan bruker jeg verdien i CSS-koden min?

Kopier cubic-bezier() og lim den inn der du definerer en tidsfunksjon — transition-timing-function, animation-timing-function, eller i kortformen, f.eks. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Nøkkelordene ease, ease-in, ease-out og ease-in-out er bare faste cubic-bezier-kurver, så hvis du velger en av disse forhåndsinnstillingene, ser du den nøyaktige verdien bak nøkkelordet.

Kan den lage en sprett- eller elastisk effekt?

Ikke alene. En enkelt cubic-bezier kan lage en startbevegelse bakover og gå over målet (overshoot) — «back»-forhåndsinnstillingene drar et håndtak utenfor boksen for å gjøre nettopp det — men den kan bare bevege seg én vei og deretter falle til ro. Spretteffekter (bounce) og elastiske effekter endrer retning flere ganger, noe en enkelt cubic-bezier ikke kan uttrykke; til det trenger du CSS-keyframes eller linear()-funksjonen med mange stoppunkter.

Skrevet og gjennomgått av BroBroGo-redaksjonen.Sist oppdatert:

CSS-overgangskurver og cubic-bezier()

En CSS-overgangskurve bestemmer hvordan hastigheten til en animasjon eller overgang utvikler seg over tid. Ved å bruke CSS-egenskapene transition-timing-function eller animation-timing-function kan man styre om en bevegelse skal starte sakte, akselerere på midten, eller bremse ned mot slutten.

CSS løser dette ved hjelp av en matematisk cubic Bezier-kurve. Kurven defineres av fire kontrollpunkter, der det første punktet alltid er fastlåst til starten (0, 0) og det siste punktet er fastlåst til slutten (1, 1). De to midterste kontrollpunktene, som i CSS-koden skrives som cubic-bezier(x1, y1, x2, y2), kan flyttes fritt for å endre kurvens form og dermed animasjonens karakter.

Slik fungerer generatoren

Dette verktøyet lar deg visuelt designe en overgangskurve ved å manipulere de to midterste kontrollpunktene direkte på skjermen.

Inndata og justering

  • Dra i de to håndtakene: Du kan bruke musen eller berøringsskjermen til å flytte kontrollpunktene direkte i koordinatsystemet for å forme kurven.
  • Første kontrollpunkt (x1, y1): Representerer koordinatene til det første håndtaket. X-verdien må ligge mellom 0 og 1, mens Y-verdien er begrenset til intervallet mellom -0.70 og 1.70.
  • Andre kontrollpunkt (x2, y2): Representerer koordinatene til det andre håndtaket. X-verdien må ligge mellom 0 og 1, mens Y-verdien er begrenset til intervallet mellom -0.70 og 1.70.
  • Forhåndsinnstillinger: Du kan velge ferdige kurver fra en liste med standardverdier som "ease", "ease-in", "ease-out" og "ease-in-out", samt mer avanserte effekter som "Back In", "Back Out" og "Back In-Out".

Utdata og visualisering

  • din kurve: Verktøyet tegner opp den resulterende kurven visuelt slik at du ser nøyaktig hvordan hastigheten fordeler seg.
  • Animasjonssammenligning: En prikk beveger seg langs din kurve, mens en annen prikk beveger seg i et konstant, lineært tempo ved siden av. Dette gjør det enkelt å sammenligne den tilpassede bevegelsen med en helt jevn bevegelse.
  • cubic-bezier(x1, y1, x2, y2): Den nøyaktige CSS-verdien genereres fortløpende. Du kan kopiere denne koden med ett klikk for å lime den direkte inn i stilarkene dine. Når kopieringen er vellykket, vises statusen Copied.

Regler for koordinater og grenseverdier

For å sikre at kurven er gyldig i CSS, gjelder spesifikke regler for kontrollpunktene:

  • Tidsaksen (X): Tiden går fra venstre til høyre, representert ved X-aksen. Siden en animasjon ikke kan gå bakover i tid, må X-verdiene for begge kontrollpunktene alltid være strengt begrenset til verdier mellom 0 og 1. Hvis du skriver inn en ugyldig verdi som 9 i feltet for X-koordinaten og flytter fokuset bort fra feltet, vil verdien automatisk korrigeres til 1.
  • Fremdriftsaksen (Y): Fremdriften går oppover langs Y-aksen. Y-verdiene kan settes utenfor normalområdet 0 til 1, og verktøyet tillater verdier fra -0.70 opp til 1.70. Dette gjør det mulig å lage effekter der animasjonen trekker seg tilbake før start (pull-back) eller skyter forbi målet (overshoot) før den faller på plass.
  • Tastaturstyring: Du kan finjustere verdiene med tastaturet. Hvis du markerer et kontrollpunkt og trykker på venstre piltast, vil verdien reduseres trinnvis, for eksempel til 0.99.
  • Feltvalidering: Hvis du tømmer et tallfelt helt og flytter fokuset bort, vil feltet automatisk gjenopprette den forrige gyldige verdien. Tomme eller ikke-numeriske inndata blir liggende uendret mens verktøyet venter på at en fullstendig verdi skrives inn.

Begrensninger ved en enkelt cubic-bezier

Selv om cubic-bezier() gir stor frihet til å tilpasse overganger, har funksjonen noen matematiske begrensninger. Siden kurven defineres av kun to kontrollpunkter mellom start og stopp, kan den bare bevege seg i én hovedretning.

Dette betyr at du kan lage en bevegelse som starter med å gå litt bakover (anticipation) eller som skyter over målet (overshoot) før den lander. Den kan imidlertid ikke svinge frem og tilbake flere ganger. Komplekse effekter som en sprettende ball (bounce) eller en elastisk svingning som går frem og tilbake over mållinjen flere ganger, lar seg ikke uttrykke med en enkelt cubic-bezier()-funksjon. For slike effekter må man i stedet bruke CSS-keyframes eller mer avanserte funksjoner.

Personvern og databehandling

Når du bruker denne generatoren, foregår all beregning og tegning av kurven lokalt i din egen nettleser. Ingen av koordinatene, verdiene eller innstillingene du taster inn blir sendt over internett eller lastet opp til BroBroGo.

Ofte stilte spørsmål

Hva betyr de to håndtakene og de fire tallene?

Kurven går fra nede til venstre (starten) til oppe til høyre (slutten), der tiden går fra venstre til høyre og fremdriften går oppover. De to håndtakene er kontrollpunktene som bøyer kurven — hver har en X- og en Y-verdi, slik at de til sammen utgjør cubic-bezier(x1, y1, x2, y2). X må være mellom 0 og 1, mens Y kan gå over toppen eller under bunnen for å få bevegelsen til å skyte over eller trekke seg tilbake før den faller til ro.

Hvordan bruker jeg verdien i CSS-koden min?

Kopier cubic-bezier() og lim den inn der du definerer en tidsfunksjon — transition-timing-function, animation-timing-function, eller i kortformen, f.eks. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Nøkkelordene ease, ease-in, ease-out og ease-in-out er bare faste cubic-bezier-kurver, så hvis du velger en av disse forhåndsinnstillingene, ser du den nøyaktige verdien bak nøkkelordet.

Kan den lage en sprett- eller elastisk effekt?

Ikke alene. En enkelt cubic-bezier kan lage en startbevegelse bakover og gå over målet (overshoot) — «back»-forhåndsinnstillingene drar et håndtak utenfor boksen for å gjøre nettopp det — men den kan bare bevege seg én vei og deretter falle til ro. Spretteffekter (bounce) og elastiske effekter endrer retning flere ganger, noe en enkelt cubic-bezier ikke kan uttrykke; til det trenger du CSS-keyframes eller linear()-funksjonen med mange stoppunkter.

Hva gjør forhåndsinnstillingen "Back Out"?

Forhåndsinnstillingen "Back Out" setter cubic-bezier()-verdien til cubic-bezier(0.34, 1.56, 0.64, 1). Dette drar det andre kontrollpunktets Y-verdi opp til 1.56, som er godt over den normale slutthøyden på 1. Resultatet er en animasjon som skyter raskt forbi sluttposisjonen sin, før den rolig trekker seg tilbake og lander nøyaktig på målet.

Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.