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

Bounce-Style CSS Easing Curve

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 generatoren med x1=0,68, y1=-0,55, x2=0,265, y2=1,55 allerede indlæst - en overskridelseskurve, som nogle easing-biblioteker mærker easeOutBack. Den negative y1 og y2 over 1 er præcis grunden til, at animationseksemplet nedenfor trækker tilbage forbi sin start og forbi sin afslutning, før den afregner; træk i enten håndtaget eller rediger tallene for at gøre effekten stærkere eller blidere.

For at være ærlig om, hvad dette er: en enkelt cubic-bezier()-kurve har kun to kontrolpunkter, så den kan tilnærme en overskydende-og-afregnende bevægelse, ikke et ægte multi-bounce fysisk bounce med adskillige aftagende hop. For en bogstavelig bold-bounce-effekt har du brug for flere keyframes eller steps()-segmenter kædet sammen - denne kurve er det tætteste en almindelig overgangs-timing-funktion kan komme på én linje.

Den enkelte overskydning er stadig præcis, hvad den mest hoppende brugergrænseflade ønsker: en knap, der springer lidt forbi dens hvilestørrelse, en modal, der overskrider, før den sætter sig, et kort, der springer på plads. Kopiér værdien, som den er, for den snappy fornemmelse, eller blødgør y1 mod 0 og y2 mod 1 for at skrue overskridelsen tilbage.

🛡️
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?