Easing function
The speed curve of a motion: whether it starts slow, ends slow, or plods along at one robotic pace.
See it
What it is
An easing function maps 'how far through the time' to 'how far through the motion'. Linear means constant speed, which reads as mechanical, because nothing physical starts and stops instantly. Real motion accelerates and decelerates, and easing is where that lives.
The working set is small. ease-out for anything entering or reacting to a click (fast start, soft landing, feels immediate), ease-in for anything leaving the screen, ease-in-out for elements moving from one on-screen place to another. The usual custom smooth curve is cubic-bezier(x1, y1, x2, y2): four numbers describing two control handles. Push the y values past 0 or 1 and you get overshoot, which is where the back curves come from. One cubic Bezier can only wobble once, though, so it cannot draw a multi-bounce elastic settle. CSS has two other custom shapes for that: linear() takes a list of points and approximates any curve you like, spring and elastic included, and steps() chops the motion into discrete jumps for sprite frames and ticking counters.
Gotcha: ease-in on a hover or click makes the UI feel broken, because nothing visibly happens for the first hundred milliseconds. Also, CSS 'ease' (the default) is not 'ease-in-out'. It is a lopsided curve, cubic-bezier(0.25, 0.1, 0.25, 1), which is why untouched transitions feel slightly mushy.
Ask AI for it
Replace the linear timing on these transitions with real easing. Use cubic-bezier(0.22, 1, 0.36, 1) (a strong ease-out) for anything entering, appearing, or responding to a click, cubic-bezier(0.4, 0, 1, 1) (ease-in) for anything leaving the screen, and cubic-bezier(0.65, 0, 0.35, 1) (ease-in-out) for elements moving between two on-screen positions. Never use linear except for spinners and marquees. Define the three curves once as CSS custom properties (--ease-out, --ease-in, --ease-in-out) and reference those everywhere instead of inlining numbers.