Stuiterende CSS-easingcurve
Ontwerp je eigen CSS cubic-bezier()-timingfunctie door twee controlepunten te verslepen, bekijk de beweging live tegen een lineaire referentie en kopieer vervolgens de bruikbare waarde.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de generator met x1=0.68, y1=-0.55, x2=0.265, y2=1.55 al geladen — een overshoot-curve die sommige easing-bibliotheken easeOutBack noemen. De negatieve y1 en de y2 boven de 1 zijn precies de reden dat de animatie hieronder eerst voorbij het begin en voorbij het eind schiet voordat hij tot rust komt; versleep een handvat of bewerk de getallen om het effect sterker of zachter te maken.
Eerlijk over wat dit is: een enkele cubic-bezier()-curve heeft maar twee controlepunten, dus hij kan één overshoot-en-herstel-beweging benaderen, geen echte fysieke stuiter met meerdere afnemende sprongen. Voor een echt bal-stuiter-effect heb je meerdere keyframes of aan elkaar geregen steps()-segmenten nodig — deze curve is het dichtste wat een eenvoudige transition-timing-function in één regel kan bereiken.
Die ene overshoot is precies wat de meeste stuiterende UI wil: een knop die net iets voorbij zijn eindgrootte knalt, een modaal venster dat over het eindpunt heen schiet voor het stopt, een kaart die in beeld springt. Kopieer de waarde zoals hij is voor dat pittige gevoel, of breng y1 richting 0 en y2 richting 1 om de overshoot af te zwakken.