Web Animation Rules

Every animation must communicate something — state change, spatial relationship, causality — or it shouldn't exist; motion added purely for visual flair adds latency and cognitive load without adding information.

Animation must communicate, not decorate

• Before adding any animation, name the specific thing it communicates (this element appeared because of that action, this list reordered, this panel is now open) — if there's no answer, cut the animation.
• Use motion to preserve object permanence across state changes (a card expanding into a detail view, not popping to a new screen) — this is the highest-value use of UI animation because it keeps the user's mental model intact.
• Never animate purely to make an interface "feel alive" on entry (staggered fade-ins on every page load, for example) — repeated exposure turns delight into friction the user has to wait through on every visit.

Duration bands

• Keep micro-interactions (hover, button press, toggle) in the 100-200ms range — anything slower feels laggy for something the user expects to be instantaneous.
• Keep standard UI transitions (panel open/close, tab switch, modal appear) in the 200-300ms range — long enough to be perceived as smooth, short enough not to block the next action.
• Reserve anything above ~400ms for large, rare, deliberately dramatic transitions (page-level, onboarding) — using long durations for frequent interactions trains users to feel the interface is slow.

Easing choices

• Use ease-out (fast start, slow finish) for elements entering the screen — this matches the physical intuition of something decelerating into place and feels responsive.
• Use ease-in (slow start, fast finish) for elements exiting the screen — an element that's leaving doesn't need to be tracked closely, so it can accelerate away.
• Avoid linear easing for anything except continuous/looping motion (spinners, progress indicators) — linear easing on a discrete transition reads as mechanical and cheap.

Animate transform and opacity only

• Restrict animated properties to transform (translate/scale/rotate) and opacity — these run on the compositor thread and don't trigger layout or paint, keeping animations smooth even under main-thread load.
• Never animate width, height, top/left, margin, or other layout-affecting properties directly — these force layout recalculation on every frame and are a primary cause of janky animation, especially on lower-end devices.
• When an element genuinely needs to change size/position in the document flow, animate a transform: scale()/translate() proxy and let the layout snap at the end, or use a library that handles the FLIP technique correctly.

Respect prefers-reduced-motion

• Wrap all non-essential animation in a @media (prefers-reduced-motion: reduce) check and disable or drastically shorten it for users who've set that preference — this isn't optional polish, it's an accessibility requirement for users with vestibular disorders.
• For essential motion (a loading indicator, a progress bar), keep functional feedback but strip decorative flourish (bounce, overshoot) under reduced motion rather than removing all feedback entirely.

No layout-shifting animation

• Never let an entrance animation push other content around while it plays (e.g. a toast that grows and shifts page content down mid-animation) — reserve the final layout space before the animation starts so surrounding content stays stable.
• Animate new content into a pre-sized container or use absolute/fixed positioning for overlays (toasts, modals, tooltips) specifically to avoid triggering reflow in the surrounding layout.

Entrance vs exit asymmetry

• Make exit animations shorter than entrance animations for the same element — the user has already seen and processed the content, so a lingering exit just delays the next action without adding information.
• It's acceptable, often preferable, to skip exit animation entirely for elements that are being replaced by new content (e.g. a page transition) — the incoming content is what deserves the motion budget.