⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

De rigtige tal bag CSS er nemmere at ind-ud

Design en tilpasset CSS cubic-bezier()-timingfunktion ved at trække to kontrolpunkter, forhåndsvise den live mod en lineær reference, og kopier derefter klarværdien.

Træk det orange håndtag (P1) og det røde håndtag (P2) for at omforme kurven – piletasterne virker også. X forbliver klemt mellem 0 og 1, som CSS kræver; træk et håndtag over eller under boksen for at sende y forbi dette område til overskridelse og afvisningseffekter.

Din kurve

Lineær (til sammenligning)

Behandler... 0%

Resultat

Denne side åbner cubic-bezier-generatoren med x1=0,42, y1=0, x2=0,58, y2=1 allerede indlæst - de nøjagtige kontrolpunkter, som CSS-ease-in-out-søgeordet udvides til. Træk enten håndtaget, eller rediger tallene direkte, og kurven, animationseksemplet og den kopierbare streng opdateres alle med det samme.

ease-in-out er et af de fem indbyggede CSS-timing-nøgleord, og det er populært, netop fordi denne kurve accelererer blidt ud af starten, holder et ret jævnt tempo gennem midten og letter ned igen før slutningen – en form, der lyder som naturlig for de fleste UI-bevægelser. At se det som eksplicitte kontrolpunkter i stedet for et søgeordsnavn gør det indlysende hvorfor: y1 er tæt på 0 og y2 er tæt på 1, begge tæt på deres matchende x, så der er ingen overskridelse i nogen af ​​retningerne.

Brug disse fire tal som udgangspunkt i stedet for selve søgeordet, når du har brug for at skubbe lidt til følelsen - træk x1 ned for en hurtigere start, eller skub y2 over 1 for at vende den samme form til en blid overskridelse. Hver ændring opdaterer forhåndsvisningen og den kopierbare cubic-bezier() linje øjeblikkeligt.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Trækbar SVG-kurveeditor med to håndtag (P1 og P2) plus redigerbare x1/y1/x2/y2-talinput for pixelpræcise værdier.
  • Forhåndsvisning af sløjfeanimation, der sammenligner din tilpassede cubic-bezier() timing med en lineær referencebold, så du kan se lempelsen, ikke bare læse den.
  • Kopierbar cubic-bezier(x1, y1, x2, y2) streng klar til overgang-timing-funktion eller animation-timing-funktion, plus forudindstillede sider til lethed-ind-ud, bounce og Material Designs standardkurve.

Vigtige fordele

✓ Træk et af kontrolpunktshåndtagene, og se kurven, forhåndsvisningen af live animation og den kopierbare CSS-streng opdateres alle sammen - ingen grund til at huske koordinatmatematikken.
✓ Y kan overskride 0 og 1 for spring- og bounce-effekter, mens X forbliver fastspændt til det 0-1-område, som CSS faktisk kræver, så hver værdi, du kopierer, er gyldig i det øjeblik, du indsætter den.
✓ Forhåndsvisningen side om side kører din brugerdefinerede kurve mod en almindelig lineær reference, så forskellen i bevægelsesfølelse - hele grunden til at bruge lempelse - er indlysende med et blik, ikke kun et kodeoutput.

Brug Cases

  • • Har du brug for en tilpasset CSS overgang-timing-funktion eller animation-timing-funktion værdi i stedet for et af de indbyggede lethedsnøgleord?
  • • Vil du se præcis, hvordan cubic-bezier(0.42, 0, 0.58, 1) — de reelle tal bag CSS' eget ease-in-out søgeord — ser ud i bevægelse, før du sender det?
  • • Bygger du en hoppeknap-, modal- eller kortanimation og har brug for en klar overskridelseskurve til at kopiere direkte ind i dit stylesheet?