Viktigste punkter
- 01Dra de to kontrollpunkt-håndtakene for å skulpturere avslappingskurven visuelt i stedet for å gjette numeriske verdier.
- 02En live kulesanimasjon spiller av tidspunktet slik at du kan føle bevegelsen før du forplikter deg til den.
- 03Alle fem CSS innebygde forhåndsvalgt (ease, linear, ease-in, ease-out, ease-in-out) er tilgjengelig som startpunkter.
- 04Cubic-bezier() verdien oppdateres live med to-desimal presisjon, klar til å lime inn i en hvilken som helst CSS-egenskap.
Hvorfor egendefinerte avslappingskurver betyr noe for UI-bevegelse
CSS's innebygde tidsfunksjoner — ease, ease-in-out, linear — dekker mye terreng, men hver brukergrensesnitt har øyeblikk hvor standarden føles litt feil. En tooltip som dukker opp for snappish, en modal som overskyter på åpning, en progresjonsstang som føles mekanisk. Cubic-bezier-kurver lar deg tuning bevegelse for å føles naturlig i stedet for mekanisk, men de fire tallene i cubic-bezier(0.4, 0, 0.2, 1) er nesten umulig å resonnere om direkte.
Handytool's cubic-bezier redigerer gjør disse tallene til en visuell kurve med to drapbare håndtak. Flytt et håndtak og kulesanimasjonen spiller av øyeblikkelig, så du kan iterere ved følelse til bevegelsen samsvarer med hensikten. Kopier deretter verdien og slipp den inn i CSS — ferdig.
Slik designer du en CSS-avslappingskurve
- 01
Start fra en forhåndsvalgt
Velg ease, linear, ease-in, ease-out eller ease-in-out som en baselinje. Håndtakene snap til korrekte posisjoner for hver forhåndsvalgt.
- 02
Dra kontrollpunkt-håndtakene
Hvert håndtak kontrollerer en ende av kurven — start-håndtaket former initial akselerasjon, slut-håndtaket former final deakselerasjon. Å flytte et håndtak bytter forhåndsvalgt til «egendefinert» automatisk.
- 03
Se kulesanimasjonen
En kule animerer fra venstre til høyre ved hjelp av kurven. Juster varrighetsglider for å forhåndsvise langsomme versus raske overganger.
- 04
Eksperimenter med overshoot
Dra et Y-akse håndtak over 1 eller under 0 for å lage overshoot og undershoot — «bouncy»-effekten som gjør en meny snap åpen energisk.
- 05
Kopier CSS-verdien
Klikk Kopier for å gripe cubic-bezier() strengen og lime den inn i transition-timing-function eller animation-timing-function i stylesheeteen.
Kjører helt i nettleseren
Redijerer er et selvstendigt nettleserverktøy — ingen skrifter, skripter og ingen data lastes etter at siden åpnes. Dra håndtak og forhåndsvis animasjoner fungerer offline. Cubic-bezier-formelen som brukes for forhåndsvisningskule er samme som nettlesere bruker for CSS-overganger, så det du ser i redijerer er nøyaktig hva stylesheeteen vil produsere.
Det er ingenting å installere og ingenting å registrere seg for. Utgangspunktet er en enkelt CSS-verdi — lime og ferdig.
Cubic-Bezier Editor FAQ
Hva er en cubic-bezier avslappingskurve?
Det er en matematisk kurve definert av to kontrollpunkter som bestemmer hvordan en CSS-overgang eller animasjon akselererer over tid. De fire tallene i cubic-bezier(x1, y1, x2, y2) setter posisjonene til disse kontrollpunktene.
Hvorfor kan Y-verdiene gå over 1 eller under 0?
Y-verdier utenfor 0–1 produserer overshoot og undershoot — kurven går forbi slut-punktet før det setter seg. Dette skaper «bouncy» avslappingskurver. X-verdiene må holde seg i 0–1.
Hvordan bruker jeg utgangspunktet?
Kopier cubic-bezier(...) strengen og lime den inn i en CSS transition-timing-function eller animation-timing-function verdi. Det fungerer i hver moderne nettleser.
Hva betyr ease-in-out faktisk?
Ease-in-out starter sakte, akselererer i midten og senker ned på slutten — cubic-bezier(0.42, 0, 0.58, 1). Det gjenspeiler hvordan virkelige gjenstander akselererer og deakselererer og er standard valg for mest polert UI-bevegelse.
Er kulesanimasjonsforhåndsvisningen nøyaktig for CSS?
Ja — forhåndsvisningen bruker samme cubic bezier formel nettlesere bruker på CSS-overganger. Varrighetsglider lar deg føle sakte versus raske kurver før du forplikter deg.