Animation is the part of an interface that most often gets added last and judged first. These are the five rules that survive contact with real products.
Motion is an explanation
A transition is a sentence about cause and effect. The panel did not appear out of nowhere — it came from the button you pressed, and the animation is the only chance the interface gets to say so. Remove it and the user has to infer the relationship; stretch it past 300ms and they start waiting for permission to continue.
Frequency sets the budget
Duration is not a taste question, it is a frequency question. Something you touch fifty times an hour — a checkbox, a tab, a keystroke — should not animate at all, because speed is the feature. Something you see once a session can afford to tell a story. Everything between those poles lives in the 150 to 300 millisecond band.
Curves carry weight
Ease-out for anything entering: it arrives fast and settles, the way a real object with mass does. Ease-in-out for anything already on screen that moves to a new place. Ease-in for anything leaving, and almost nothing else, because it starts slowly and slow starts read as lag.
Leave faster than you arrive
Exits should run at roughly three quarters of their entrance. Nobody is studying the element on the way out — they have already decided, and the animation is now the only thing standing between the decision and the result. Symmetric durations feel polite on paper and sluggish in the hand.
The version with no motion
Every animation needs a version that does not animate. Gate it on prefers-reduced-motion, drop the duration to zero rather than swapping in a shorter one, and check that the final state is still legible on its own. If the interface only makes sense while it is moving, the motion is doing work the layout should have done.
None of this is about making software feel expensive. It is about making cause and effect legible, then getting out of the way.