CSS-lättnadskurva i studsstil

Den här sidan öppnar generatorn med x1=0,68, y1=-0,55, x2=0,265, y2=1,55 redan laddade - en överskridande kurva som vissa easing-bibliotek betecknar easeOutBack. De negativa y1 och y2 ovan 1 är exakt varför animeringsförhandsvisningen nedan drar tillbaka förbi början och förbi slutet innan den avgörs; dra antingen handtaget eller redigera siffrorna för att göra effekten starkare eller mildare.

För att vara ärlig om vad det här är: en enda cubic-bezier()-kurva har bara två kontrollpunkter, så den kan ungefärligt vara en överskjutande rörelse, inte en äkta fysisk studs med flera studsar med flera minskande hopp. För en bokstavlig bollstudseffekt skulle du behöva flera nyckelbildrutor eller steg()-segment kedjade samman – den här kurvan är det närmaste en vanlig övergångstidsfunktion kan komma på en rad.

Det enda överskottet är fortfarande precis vad det mest studsiga användargränssnittet vill ha: en knapp som hoppar lite förbi sin vilostorlek, en modal som överskrider innan den sätter sig, ett kort som fjädrar på plats. Kopiera värdet som det är för den häftiga känslan, eller mjuka upp y1 mot 0 och y2 mot 1 för att slå tillbaka överskjutningen.