Cubic-bezier-editor – generator for CSS-easingkurver

Q: Hvor bruker jeg verdien?

I transition timing function , animation timing function eller i kortskriften: transition: transform 300ms cubic bezier 0.4, 0, 0.2, 1 ; . Web Animations API godtar den som easing .

Q: Hvilke kurver bruker Material Design?

Den klassiske standardkurven er cubic bezier 0.4, 0, 0.2, 1 , med variantene decelerate, accelerate og sharp. Material 3 legger til de fremhevede kurvene. Alle ligger i menyen Forhåndsinnstillinger .

Q: Hvordan håndterer jeg redusert bevegelse?

Respekter @media prefers reduced motion: reduce i CSS en din: forkort eller fjern store bevegelser og behold enkle toninger.

Cubic-bezier-editor (CSS-easing)

Lag CSS-easingkurver med en cubic-bezier-editor med draghåndtak, sammenlign dem med linear i en direkte animasjon og kopier cubic-bezier() eller linear().

Verdi for cubic-bezier() Forhåndsinnstillinger

Dra i de to håndtakene (P1 og P2). Tiden går fra venstre mot høyre, fremdriften fra bunn til topp. Håndtakene kan gå over 1 eller under 0 for en sprett-effekt. Med et håndtak i fokus kan du bruke piltastene (Shift for 0,1).

x1 y1 x2 y2

Forhåndsvisning av animasjon

Kurven din

linear

Varighet 1200 ms

CSS-tidsfunksjon

Tilnærming med linear()

Den samme kurven samplet som en CSS linear()-easing (Chrome 113+, Firefox 112+, Safari 17.2+). Flere punkter følger kurven tettere.

Segmenter 20

Slik bruker du cubic-bezier-editoren

Dra i de to håndtakene på grafen. P1 (det første kontrollpunktet) former starten på bevegelsen, P2 slutten. Tiden går fra venstre mot høyre og fremdriften fra bunn til topp.
Eller skriv en verdi i Verdi for cubic-bezier(): en hel cubic-bezier(0.4, 0, 0.2, 1), fire tall, eller et nøkkelord som ease-in-out. Feltene x1, y1, x2 og y2 redigerer én koordinat om gangen.
Start med menyen Forhåndsinnstillinger (CSS-nøkkelord, familiene fra sine til back, og Material Design-kurver) eller nøkkelordknappene. Når kurven din tilsvarer en forhåndsinnstilling, vises navnet ved siden av knappene.
Se på Forhåndsvisning av animasjon: prikken på Kurven din og prikken på linear går like langt i samme Varighet. Bruk Pause/Spill av og Start på nytt for å sammenligne dem.
Kopier resultatet fra CSS-tidsfunksjon, eller kopier Tilnærming med linear() og velg antall Segmenter.

Tastatur: sett et håndtak i fokus og bruk piltastene for å flytte det 0,01, eller 0,1 med Shift.

Hvis systemet ditt er satt til å redusere bevegelse, starter animasjonen på pause. Trykk på Spill av hvis du vil kjøre den likevel.

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

Hva cubic-bezier() betyr

En CSS-easingfunksjon koder hvor langt en overgang har kommet (0 til 1) som funksjon av tiden som har gått (0 til 1). cubic-bezier(x1, y1, x2, y2) beskriver denne sammenhengen med en kubisk Bézier-kurve som starter i (0, 0), slutter i (1, 1) og trekkes av to kontrollpunkter, P1 = (x1, y1) og P2 = (x2, y2).

x-verdiene er tid og må holde seg mellom 0 og 1, ellers ville ikke funksjonen vært en gyldig tidskurve. Editoren holder dem innenfor.
y-verdiene er fremdrift og kan gå under 0 eller over 1. En y over 1 får animasjonen til å skyte forbi målet og komme tilbake, som Back-kurvene. Under 0 beveger den seg først bakover.
Bratt helning betyr rask bevegelse, flat helning langsom bevegelse. ease-out starter raskt og slutter langsomt, noe som føles naturlig for elementer som kommer inn på skjermen. ease-in gjør det motsatte og passer for elementer som forlater den.

CSS-nøkkelordene er snarveier: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) og linear = (0, 0, 1, 1).

Tilnærmingen med linear()

Den nyere funksjonen linear() lister opp fremdriftsverdier ved jevnt fordelte tidspunkter, for eksempel linear(0, 0.25, 0.5, 0.75, 1), og forbinder dem med rette linjer. Verktøyet samplar kurven din (det løser Bézier-kurven for hvert tidstrinn) og skriver verdiene med tre desimaler. Med 20 til 40 segmenter ser resultatet visuelt identisk ut med kurven. Den egentlige fordelen med linear() er for kurver en Bézier-kurve ikke kan tegne, som sprett og fjærer, men den lar deg også dele én syntaks. Den fungerer i Chrome og Edge 113+, Firefox 112+ og Safari 17.2+, så behold cubic-bezier()-verdien som reserve.

Ofte stilte spørsmål

Hvor bruker jeg verdien?

I transition-timing-function, animation-timing-function eller i kortskriften: transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);. Web Animations API godtar den som easing.

Hva er gode varigheter?

Små endringer i grensesnittet varer vanligvis 150 til 300 ms, store bevegelser over skjermen 300 til 500 ms. Lengre animasjoner føles fort trege.

Hvorfor kan jeg ikke dra et håndtak forbi venstre eller høyre kant?

Fordi x er tid, og tiden kan ikke gå bakover: CSS avviser x-verdier utenfor 0–1.

Hvilke kurver bruker Material Design?

Den klassiske standardkurven er cubic-bezier(0.4, 0, 0.2, 1), med variantene decelerate, accelerate og sharp. Material 3 legger til de fremhevede kurvene. Alle ligger i menyen Forhåndsinnstillinger.

Hvordan håndterer jeg redusert bevegelse?

Respekter @media (prefers-reduced-motion: reduce) i CSS-en din: forkort eller fjern store bevegelser og behold enkle toninger.