On animation timing — why everything feels off until it doesn't

The 200ms threshold

Below ~150ms a transition reads as instant — there is no value to easing it. Above ~400ms it starts to feel sluggish on desktop. The sweet spot for most product UI is between 180ms and 320ms, and the harder thing is picking the right curve.

The curves I reach for

• cubic-bezier(0.2, 0.8, 0.2, 1) for "decisive" — modal open, drawer slide.
• cubic-bezier(0.4, 0, 0.2, 1) for ambient hover and small nudges.
• Linear for shimmer skeletons. Never for movement.

Why most animations feel cheap

The default ease-in-out curve is symmetric — it accelerates and decelerates equally. Real motion almost never does that. Once you start using asymmetric curves, the rest of the UI starts feeling more confident.