Ask someone why an interface feels slow and they'll usually blame the duration. Three hundred milliseconds is too long, cut it to a hundred and fifty. Sometimes that's right. But more often the number was never the problem. The curve was.
Easing describes how motion distributes its speed over time. An animation that spends its energy early feels eager. One that saves it for the end feels hesitant. Same duration, opposite personality.
Animators figured this out a century before we had CSS. "Slow in and slow out" is one of Disney's twelve principles of animation, written down in the 1930s: nothing alive moves at constant speed, so the drawings cluster near the poses and thin out through the middle of the move. A hand reaching for a door accelerates away from rest and brakes into contact. Constant speed was reserved for one thing: machinery. That is still exactly what linear communicates in an interface today, which is why it belongs on progress bars and marquees and almost nowhere else.
ease-in
ease-out
The left menu uses ease-in: it starts slow and accelerates. The right one uses a strong ease-out: it moves immediately, then settles. They both take exactly 300ms, but the right one feels nearly instant, because the moment a user is watching most closely is the first frame after they click. ease-out spends its motion there. ease-in spends it after the user has already stopped caring.
Film editors know this moment intimately. The oldest rule in the cutting room is to cut on action: you leave a shot while something is moving, because the viewer's eye rides the motion across the splice and never notices the seam. An interface transition is a cut. ease-out cuts on action, carrying your attention from click to result. ease-in is the awkward edit where the shot lingers before anything happens, and you feel the seam.
So the rule of thumb: anything entering the screen gets ease-out. Movement between two on-screen positions gets ease-in-out, acceleration then deceleration, the way a camera dollies between subjects. ease-in on its own is almost never right for UI, because it delays feedback at the exact moment feedback matters.
The built-in CSS keywords are also weaker than they should be. ease-out technically decelerates, but the curve is shallow enough that it reads as generic. A custom curve with a sharper front gives the same animation a sense of intent:
:root {
--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}
.menu {
animation: menu-in 250ms var(--ease-out-strong);
}Here's the whole cast running the same race:
linear
ease-in
ease-out
strong ease-out
Apple went further and mostly abandoned curves for springs. A bezier is a fixed performance: it plays identically every time and cannot respond to new input. A spring is a behavior. It animates from the current value toward a target, and if the target changes mid-flight the motion bends toward it with no visible seam. That is why you can grab an iOS sheet while it is closing and it follows your finger instead of finishing the animation first. Apple's designers do not even tune springs in physics terms. They use two knobs, damping and response, and their default is telling: damping 1.0, no bounce at all. Overshoot is reserved for moments where the user's own gesture carried momentum, a flick or a throw. The bounce belongs to the user's energy, not to the interface's ego.
You can feel the difference the moment a target changes mid-flight. Toggle fast and watch what each approach does with motion already in progress:
transition
keyframes
That is Disney again, incidentally. "Follow through" is the principle that a moving thing does not stop all at once, its parts settle after it. A slightly under-damped spring is follow-through, formalized. Which is why bounce feels wrong on a menu that just faded in (nothing was moving, so nothing should settle) and feels right on a card you flung across the screen.
None of this shows up in a screenshot. Two implementations can look identical in a design review and feel completely different in the hand. That gap, between what a static frame shows and what the motion says, is where most interfaces quietly lose trust.
Duration is how long an animation takes. Easing is what it says while it's happening.