Bounce-Style CSS Easing Curve
Design en tilpasset CSS cubic-bezier() timing-funksjon ved å dra to kontrollpunkter, forhåndsvise den live mot en lineær referanse, og kopier deretter klarverdien.
Resultat
Denne siden åpner generatoren med x1=0.68, y1=-0.55, x2=0.265, y2=1.55 allerede lastet – en overskridelseskurve som noen easing-biblioteker etiketterer easeOutBack. Den negative y1 og y2 over 1 er nøyaktig grunnen til at forhåndsvisningen av animasjonen nedenfor trekker seg tilbake forbi starten og forbi slutten før den slår seg; dra enten håndtaket eller rediger tallene for å gjøre effekten sterkere eller mildere.
For å være ærlig om hva dette er: en enkelt cubic-bezier()-kurve har bare to kontrollpunkter, så den kan tilnærme én overskyting-og-settle-bevegelse, ikke en ekte multi-bounce fysisk sprett med flere avtagende hopp. For en bokstavelig ball-sprett-effekt trenger du flere keyframes eller steps()-segmenter lenket sammen – denne kurven er det nærmeste en vanlig overgangs-timing-funksjon kan komme på én linje.
Den enkelt overskytingen er fortsatt akkurat det mest sprettende brukergrensesnittet vil ha: en knapp som spretter litt forbi hvilestørrelsen, en modal som overskrider før den slår seg, et kort som springer på plass. Kopier verdien som den er for den skarpe følelsen, eller myk opp y1 mot 0 og y2 mot 1 for å slå overskytingen tilbake.