CSS Cubic-Bezier Generator

Med dette verktøyet former du en tilpasset CSS cubic-bezier()-easingkurve med fire glidere og forhåndsviser den live før du kopierer koden. Juster kontrollpunktene x1, y1, x2 og y2, se kurven og et bevegelig forhåndsvisningselement oppdatere seg umiddelbart, og kopier deretter transition-timing-function: cubic-bezier(...) rett inn i stilarket ditt.

Hva er dette verktøyet?

cubic-bezier() er en CSS-tidsfunksjon som styrer hvordan en animert eller overgangsverdi akselererer og bremser opp over tid, i stedet for å bevege seg med konstant hastighet. Den defineres av to kontrollpunkter — (x1, y1) og (x2, y2) — som bøyer en kurve mellom et fast startpunkt (0,0) og sluttpunkt (1,1). X-verdiene må holde seg mellom 0 og 1, men y-verdiene kan gå utenfor dette området for å skape overshoot- eller sprett-effekter.

Skrevet for hånd krever det mye prøving og feiling å justere fire desimaltall til en følelse som verken er for brå eller for slapp. Dette verktøyet erstatter gjettingen med direkte manipulasjon: dra en glider, se kurven bøye seg og forhåndsvisningsballen bevege seg tilsvarende, og kopier CSS-en når bevegelsen føles riktig.

Kilde: CSS Easing Functions Level 1, W3C — spesifikasjonen som definerer cubic-bezier() og de fem navngitte nøkkelordene forhåndsvalgene i dette verktøyet er basert på.

Hvorfor bruke det?

Live SVG-graf viser nøyaktig hvordan kurven din bøyer seg mellom det faste start- og sluttpunktet, med begge kontrollpunkter og deres håndtak tegnet inn for tydelighet.
Play-knapp animerer et forhåndsvisningselement over et spor med din eksakte kurve, slik at du kan føle bevegelsen, ikke bare se en statisk graf.
Ett-klikks forhåndsvalg for de fem standard navngitte easingfunksjonene — ease, ease-in, ease-out, ease-in-out og linear — slik de er dokumentert i CSS Easing Functions-spesifikasjonen.
Y-verdier kan gå under 0 eller over 1, slik at du kan bygge overshoot-/sprett-easinger som de navngitte nøkkelordene ikke kan produsere.
Genererer ferdig-å-lime-inn transition-timing-function-CSS — samme verdi fungerer også for animation-timing-function.
Kjører helt i nettleseren din — ingenting du konfigurerer blir lastet opp noe sted. Gratis, ingen registrering.

Slik bruker du det

Dra x1/y1-gliderne for å sette det første kontrollpunktet, som former hvordan animasjonen starter.
Dra x2/y2-gliderne for å sette det andre kontrollpunktet, som former hvordan animasjonen avsluttes.
Følg med på den svarte kurven på grafen — en kurve som buler over diagonalen tidlig betyr at bevegelsen starter raskt, mens en som holder seg under den betyr at bevegelsen starter sakte.
Klikk Play for å se et forhåndsvisningselement bevege seg over sporet med kurven din som transition-timing-function.
Prøv et forhåndsvalg (ease, ease-in, ease-out, ease-in-out, linear) som utgangspunkt, og finjuster deretter gliderne derfra.
Kopier den genererte CSS-en og lim den inn i en transition- eller animation-regel.

Eksempel

Inndata

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Resultat

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Dette er standard CSS-nøkkelordet ease skrevet ut som eksplisitte kontrollpunkter — en rask start, skarp akselerasjon, og deretter en gradvis oppbremsing mot slutten.

Hvorfor y-verdier kan overstige 0–1

I motsetning til x-aksen, som representerer tid og må gå fra 0 til 1, representerer y-aksen fremdriften til den animerte verdien og har ingen slik begrensning. Å sette y1 under 0 eller y2 over 1 får kurven til å dukke under startverdien eller skyte forbi sluttverdien før den slår seg til ro — grunnlaget for overshoot- og anticipation-effekter brukt i knappetrykk, modal-innsprett og lekne UI-mikrointeraksjoner. Ingen av de fem navngitte nøkkelordene (ease, ease-in, ease-out, ease-in-out, linear) kan produsere dette; du trenger en tilpasset cubic-bezier() for det.

transition-timing-function vs. animation-timing-function

cubic-bezier()-verdien dette verktøyet genererer fungerer identisk i begge egenskapene. Bruk transition-timing-function når bevegelsen utløses av en tilstandsendring (som et hover eller en klassevekling), og animation-timing-function inne i en @keyframes-drevet animasjonsregel når du trenger samme easing-følelse anvendt automatisk eller i en løkke.

Vanlige easing-mønstre

Rask UI-tilbakemelding (knapper, brytere): hold kontrollpunktene nær diagonalen med en liten ease-out-vridning, f.eks. cubic-bezier(0.4, 0, 0.2, 1).
Material Designs standardkurve: cubic-bezier(0.4, 0, 0.2, 1) — rask start, mild avslutning, mye brukt for panel- og kort-overganger.
Sprett/overshoot: push y2 over 1, f.eks. cubic-bezier(0.34, 1.56, 0.64, 1), for en leken pop-in-følelse.
Anticipation før bevegelse: push y1 under 0 slik at elementet trekker seg litt tilbake før det beveger seg fremover.
Jevn ease-in-out for løkkeanimasjoner: hold kurven tilnærmet symmetrisk rundt midten.

Kombinasjon med andre CSS-verktøy

En easingkurve står sjelden alene — den brukes vanligvis på et element som også trenger skygger, avrundede hjørner eller gradienter definert. Generer den visuelle stylingen med de andre CSS-verktøyene under, og legg deretter til tidsfunksjonen fra dette verktøyet i samme regel eller en transition-/animation-erklæring.

→ Box Shadow-generator · Border Radius-generator

Ofte stilte spørsmål

Hva betyr egentlig de fire tallene i cubic-bezier()?

De er koordinatene til to kontrollpunkter, (x1, y1) og (x2, y2), som bøyer en Bézier-kurve fra et fast startpunkt ved (0,0) til et fast sluttpunkt ved (1,1). X-aksen representerer forløpt tid (0 til 1), og y-aksen representerer hvor langt den animerte egenskapen har kommet, som er grunnen til at x1 og x2 må holde seg innenfor 0–1 mens y1 og y2 kan gå utenfor det området.

Hva er forskjellen mellom ease, ease-in, ease-out og ease-in-out?

ease (CSS-standarden) starter raskt og bremser deretter mykt opp. ease-in starter sakte og akselererer mot slutten, nyttig for elementer som forlater skjermen. ease-out starter raskt og bremser opp, nyttig for elementer som kommer inn på skjermen. ease-in-out er sakte i begge ender og raskere i midten, noe som gir en jevn, symmetrisk følelse.

Kan jeg bruke samme cubic-bezier()-verdi for både transitions og animations?

Ja. transition-timing-function og animation-timing-function godtar nøyaktig samme cubic-bezier()-syntaks og produserer samme easingkurve — eneste forskjell er hvilken CSS-funksjon (en transition vs. en keyframes-animasjon) tidsfunksjonen er koblet til.

Hvorfor ser kurven min ødelagt ut når y1 eller y2 er svært stor eller negativ?

Det er forventet — å skyve y-verdier langt utenfor 0–1 skaper kraftig overshoot, der den animerte verdien svinger godt forbi målet sitt før den slår seg til ro. Det er en gyldig og ofte tilsiktet effekt, men hvis det ser uønsket ut, før y1 og y2 tilbake nærmere 0–1-området.

Er en tilpasset kurve bedre enn å bare bruke de navngitte nøkkelordene?

Ikke nødvendigvis — de fem nøkkelordene (ease, ease-in, ease-out, ease-in-out, linear) dekker de fleste hverdagsbehov og er enklere å lese i kode. Bruk en tilpasset cubic-bezier() når du trenger en spesifikk følelse nøkkelordene ikke gir, som et sprett, et skarpere napp, eller for å matche et bestemt designsystems bevegelsesspesifikasjon.