The word 'animation' is doing a lot of damage. It suggests decoration — a little bounce, a little fade, a little delight. What I actually mean when I move pixels is something else: motion is an affordance. It says 'this is a button, you can tap it', or 'this is loading, not broken', or 'you just lost your place, here it is again'.
The 120ms rule
A transition longer than 300ms better be telling a story. A transition shorter than 120ms better not exist. That's my rule. Everything in between I can defend; anything outside it, I'd rather re-specify.
<motion.div
initial={{ y: 12, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.25, ease: [0.2, 0.8, 0.2, 1] }}
/>The easing curve I use 80% of the time
cubic-bezier(0.2, 0.8, 0.2, 1). It feels confident on entrance, polite on exit, and it's indistinguishable from the Apple standard to anyone who isn't a motion nerd. It is, if anything, boring. That's the point.