CSS Cubic-Bezier Generator

Med dette værktøj kan du forme en brugerdefineret CSS cubic-bezier()-easingkurve med fire skydere og forhåndsvise den live, før du kopierer koden. Justér kontrolpunktsværdierne x1, y1, x2 og y2, se kurven og et bevægeligt forhåndsvisningselement opdatere sig øjeblikkeligt, og kopiér derefter transition-timing-function: cubic-bezier(...) direkte ind i dit stylesheet.

Hvad er dette værktøj?

cubic-bezier() er en CSS-timingfunktion, der styrer, hvordan en animeret eller overgangsstyret værdi accelererer og decelererer over tid, i stedet for at bevæge sig med en konstant hastighed. Den defineres af to kontrolpunkter — (x1, y1) og (x2, y2) — der bøjer en kurve mellem et fast startpunkt (0,0) og slutpunkt (1,1). x-værdierne skal holdes mellem 0 og 1, men y-værdierne kan gå uden for det interval for at skabe overshoot- eller bounce-effekter.

Skrevet i hånden kræver det meget prøven-sig-frem at justere fire decimaltal, så følelsen hverken bliver for brat eller for slap. Dette værktøj erstatter den gætteproces med direkte manipulation: træk en skyder, se kurven bøje og forhåndsvisningskuglen bevæge sig tilsvarende, og kopiér CSS'en, når bevægelsen føles rigtig.

Kilde: CSS Easing Functions Level 1, W3C — specifikationen, der definerer cubic-bezier() og de fem navngivne nøgleord, dette værktøjs forudindstillinger bygger på.

Hvorfor bruge det?

Live SVG-graf viser præcis, hvordan din kurve bøjer mellem det faste start- og slutpunkt, med begge kontrolpunkter og deres håndtag tegnet ind for tydelighed.
Afspil-knap animerer et forhåndsvisningselement hen over et spor med din præcise kurve, så du kan mærke bevægelsen, ikke kun se en statisk graf.
Forudindstillinger med ét klik til de fem standard navngivne easingfunktioner — ease, ease-in, ease-out, ease-in-out og linear — som dokumenteret i CSS Easing Functions-specifikationen.
Y-værdier kan gå under 0 eller over 1, så du kan bygge overshoot-/bounce-agtige easinger, som de navngivne nøgleord ikke kan producere.
Producerer brugsklar transition-timing-function-CSS — samme værdi virker også til animation-timing-function.
Kører helt i din browser — intet, du konfigurerer, uploades nogen steder. Gratis, ingen tilmelding.

Sådan bruger du det

Træk x1/y1-skyderne for at indstille det første kontrolpunkt, som former, hvordan animationen starter.
Træk x2/y2-skyderne for at indstille det andet kontrolpunkt, som former, hvordan animationen slutter.
Følg den sorte kurve på grafen — en kurve, der buler over diagonalen tidligt, betyder, at bevægelsen starter hurtigt; en kurve, der forbliver under den, betyder, at bevægelsen starter langsomt.
Klik på Afspil for at se et forhåndsvisningselement bevæge sig hen over sporet med din kurve som dets transition-timing-function.
Prøv en forudindstilling (ease, ease-in, ease-out, ease-in-out, linear) som udgangspunkt, og finjustér derefter skyderne derfra.
Kopiér den genererede CSS, og indsæt den i en transition- eller animation-regel.

Eksempel

Input

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

Output

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

Dette er standard CSS-nøgleordet ease skrevet ud som eksplicitte kontrolpunkter — en hurtig start, skarp acceleration og derefter en gradvis opbremsning mod slutningen.

Hvorfor y-værdier kan overstige 0–1

I modsætning til x-aksen, som repræsenterer tid og skal gå fra 0 til 1, repræsenterer y-aksen den animerede værdis fremskridt og har ingen tilsvarende grænse. At sætte y1 under 0 eller y2 over 1 får kurven til at dykke forbi startværdien eller skyde forbi slutværdien, før den falder til ro — grundlaget for overshoot- og forventningseffekter brugt i knaptryk, modal-popins og legende UI-mikrointeraktioner. Ingen af de fem navngivne nøgleord (ease, ease-in, ease-out, ease-in-out, linear) kan producere dette; du har brug for en brugerdefineret cubic-bezier() til det.

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

cubic-bezier()-værdien, dette værktøj genererer, fungerer identisk i begge egenskaber. Brug transition-timing-function, når bevægelsen udløses af en tilstandsændring (som en hover eller et klasseskift), og animation-timing-function inde i en @keyframes-drevet animationsregel, når du vil have samme easing-følelse anvendt automatisk eller i en løkke.

Almindelige easing-mønstre

Skarp UI-feedback (knapper, kontakter): hold kontrolpunkterne tæt på diagonalen med en let ease-out-vridning, f.eks. cubic-bezier(0.4, 0, 0.2, 1).
Material Designs standardkurve: cubic-bezier(0.4, 0, 0.2, 1) — hurtig start, blid afslutning, meget brugt til panel- og kortovergange.
Bounce/overshoot: skub y2 over 1, f.eks. cubic-bezier(0.34, 1.56, 0.64, 1), for en legende pop-in-følelse.
Forventning før bevægelse: skub y1 under 0, så elementet trækker sig let tilbage, før det bevæger sig fremad.
Blød ease-in-out til løkkende animationer: hold kurven næsten symmetrisk omkring centrum.

Kombination med andre CSS-værktøjer

En easingkurve står sjældent alene — den anvendes som regel på et element, der også har brug for skygger, afrundede hjørner eller gradienter defineret. Generér den visuelle styling med de andre CSS-værktøjer nedenfor, og tilføj derefter timingfunktionen fra dette værktøj til samme regel eller en transition-/animation-erklæring.

→ Box Shadow-generator · Border Radius-generator

Ofte stillede spørgsmål

Hvad betyder de fire tal i cubic-bezier() egentlig?

De er koordinaterne for to kontrolpunkter, (x1, y1) og (x2, y2), der bøjer en Bézier-kurve, som løber fra et fast startpunkt ved (0,0) til et fast slutpunkt ved (1,1). X-aksen repræsenterer forløbet tid (0 til 1), og y-aksen repræsenterer, hvor langt den animerede egenskab er nået, hvilket er grunden til, at x1 og x2 skal holdes inden for 0–1, mens y1 og y2 kan gå uden for det interval.

Hvad er forskellen på ease, ease-in, ease-out og ease-in-out?

ease (CSS-standarden) starter hurtigt og bremser derefter blidt af. ease-in starter langsomt og accelererer mod slutningen, nyttig til elementer, der forlader skærmen. ease-out starter hurtigt og decelererer, nyttig til elementer, der kommer ind på skærmen. ease-in-out er langsom i begge ender og hurtigere i midten, hvilket giver en jævn, symmetrisk følelse.

Kan jeg bruge samme cubic-bezier()-værdi til både overgange og animationer?

Ja. transition-timing-function og animation-timing-function accepterer nøjagtig samme cubic-bezier()-syntaks og producerer den samme easingkurve — den eneste forskel er, hvilken CSS-funktion (en transition vs. en keyframes-animation) den timingfunktion er knyttet til.

Hvorfor ser min kurve ødelagt ud, når y1 eller y2 er meget stor eller negativ?

Det er forventet — at skubbe y-værdier langt uden for 0–1 skaber kraftigt overshoot, hvor den animerede værdi svinger langt forbi sit mål, før den falder til ro. Det er en gyldig og ofte tilsigtet effekt, men hvis det ser uønsket ud, så før y1 og y2 tilbage tættere på 0–1-intervallet.

Er en brugerdefineret kurve bedre end bare at bruge de navngivne nøgleord?

Ikke nødvendigvis — de fem nøgleord (ease, ease-in, ease-out, ease-in-out, linear) dækker de fleste hverdagsbehov og er nemmere at læse i koden. Grib en brugerdefineret cubic-bezier(), når du har brug for en bestemt følelse, nøgleordene ikke giver, såsom en bounce, et skarpere snap eller at matche et bestemt designsystems bevægelsesspecifikation.