What do the four numbers mean?
They are two control points of a cubic bezier: x1, y1 for the first, x2, y2 for the second. The x axis is elapsed time normalised from 0 to 1, and the y axis is animation progress. The curve maps one to the other, so a steep section means the property is changing fast at that moment.
Why can y go above 1 but x cannot?
Because x is time and the browser must be able to evaluate progress for any moment: an x outside 0 to 1 would make the curve non-monotonic in time, which is undefined. y is progress, and progress overshooting 100% is perfectly meaningful. That is how a bezier produces a bounce without any physics engine.
How do I make an animation bounce?
Push y2 above 1, for example cubic-bezier(0.34, 1.56, 0.64, 1). The element overshoots its final position and settles back. For a wind-up, push y1 below 0 so the element moves slightly backwards before going forwards. Both are single-curve effects and need no keyframes.
Which easing should I use for a UI transition?
ease-out for elements entering (a menu opening, a toast appearing), because deceleration into place feels natural. ease-in for elements leaving, because acceleration away signals dismissal. ease-in-out for a movement between two visible states. linear only for a spinner or a progress bar, where constant speed is the point.
Why does my animation feel slow even with a good curve?
Almost always because the duration is too long. Interface motion should mostly land between 150ms and 300ms; anything over 500ms starts to feel like the app is thinking. The curve controls how the motion feels, and the duration controls whether it feels fast, and duration wins.