CSS Cubic-Bezier-generator

Vad är detta verktyg?

cubic-bezier() är en CSS-tidsfunktion som styr hur ett animerat eller övergående värde accelererar och retarderar över tid, istället för att röra sig i konstant hastighet. Den definieras av två kontrollpunkter — (x1, y1) och (x2, y2) — som böjer en kurva mellan en fast startpunkt (0,0) och slutpunkt (1,1). x-värdena måste hålla sig mellan 0 och 1, men y-värden kan gå utanför det intervallet för att skapa overshoot- eller studsande effekter.

Skrivet för hand tar det mycket prövande att justera fyra decimaltal till en känsla som varken är för abrupt eller för mjäkig. Det här verktyget ersätter det trevandet med direkt manipulation: dra i ett reglage, se kurvan böjas och förhandsvisningsbollen röra sig därefter, och kopiera CSS:en när rörelsen känns rätt.

Källa: CSS Easing Functions Level 1, W3C — specifikationen som definierar cubic-bezier() och de fem namngivna nyckelorden det här verktygets mallar bygger på.

Varför använda det?

• Levande SVG-graf visar exakt hur din kurva böjer sig mellan de fasta start- och slutpunkterna, med båda kontrollpunkterna och deras handtag inritade för tydlighet.
• Play-knapp animerar ett förhandsvisningselement över en bana med din exakta kurva, så du kan känna rörelsen, inte bara se en statisk graf.
• Ettklicksmallar för de fem standardnamngivna easingfunktionerna — ease, ease-in, ease-out, ease-in-out och linear — enligt CSS Easing Functions-specifikationen.
• Y-värden kan gå under 0 eller över 1, vilket låter dig bygga overshoot-/studseasingar som de namngivna nyckelorden inte kan ge.
• Ger färdig-att-klistra-in transition-timing-function-CSS — samma värde fungerar även för animation-timing-function.
• Körs helt i din webbläsare — inget du konfigurerar laddas upp någonstans. Gratis, ingen registrering.

Så använder du det

1. Dra i x1/y1-reglagen för att ställa in den första kontrollpunkten, som formar hur animationen börjar.
2. Dra i x2/y2-reglagen för att ställa in den andra kontrollpunkten, som formar hur animationen slutar.
3. Titta på den svarta kurvan i grafen — en kurva som buktar ovanför diagonalen tidigt betyder att rörelsen börjar snabbt, en som ligger under den betyder att rörelsen börjar långsamt.
4. Klicka på Play för att se ett förhandsvisningselement röra sig över banan med din kurva som transition-timing-function.
5. Prova en mall (ease, ease-in, ease-out, ease-in-out, linear) som utgångspunkt, finjustera sedan reglagen därifrån.
6. Kopiera den genererade CSS:en och klistra in den i en transition- eller animation-regel.

Exempel

Inmatning

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

Resultat

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

Det här är standard-CSS:ens ease-nyckelord utskrivet som explicita kontrollpunkter — en snabb start, skarp acceleration, sedan en gradvis inbromsning mot slutet.

Varför y-värden kan överstiga 0–1

Till skillnad från x-axeln, som representerar tid och måste löpa från 0 till 1, representerar y-axeln den animerade egenskapens framsteg och har ingen sådan gräns. Att sätta y1 under 0 eller y2 över 1 gör att kurvan dyker under startvärdet eller skjuter över slutvärdet innan den lägger sig — grunden för de overshoot- och anticipation-effekter som används i knapptryckningar, modala popup-inzoomningar och lekfulla UI-mikroanimationer. Inget av de fem namngivna nyckelorden (ease, ease-in, ease-out, ease-in-out, linear) kan ge det här; du behöver en anpassad cubic-bezier() för det.

transition-timing-function kontra animation-timing-function

cubic-bezier()-värdet det här verktyget genererar fungerar identiskt i båda egenskaperna. Använd transition-timing-function när rörelsen utlöses av en tillståndsändring (som en hover eller en klassomväxling), och animation-timing-function inuti en @keyframes-driven animationsregel när du behöver samma easingkänsla applicerad automatiskt eller i en loop.

Vanliga easingmönster

• Snabb UI-feedback (knappar, växlingsreglage): håll kontrollpunkterna nära diagonalen med en lätt ease-out-bias, t.ex. cubic-bezier(0.4, 0, 0.2, 1).
• Material Designs standardkurva: cubic-bezier(0.4, 0, 0.2, 1) — snabb start, mjuk avslutning, allmänt använd för panel- och kortövergångar.
• Studs/overshoot: skjut y2 över 1, t.ex. cubic-bezier(0.34, 1.56, 0.64, 1), för en lekfull popp-in-känsla.
• Anticipation innan rörelse: skjut y1 under 0 så att elementet drar sig tillbaka lite innan det rör sig framåt.
• Mjuk ease-in-out för loopande animationer: håll kurvan nära symmetrisk kring mitten.

Kombinera med andra CSS-verktyg

En easingkurva står sällan ensam — den appliceras oftast på ett element som också behöver skuggor, rundade hörn eller gradienter definierade. Generera den visuella stilen med de andra CSS-verktygen nedan, lägg sedan till tidsfunktionen från det här verktyget till samma regel eller en transition-/animation-deklaration.

→ Box Shadow-generator · Border Radius-generator

Vanliga frågor