UI Animation

Core rules

• Animate to clarify cause/effect or add deliberate delight.
• Keep interactions fast (200-300ms; up to 1s only for illustrative motion).
• Never animate keyboard interactions (arrow-key navigation, shortcut responses, tab/focus).
• Prefer CSS; use WAAPI or JS only when needed.
• Make animations interruptible and input-driven.
• Honor prefers-reduced-motion (reduce or disable).

What to animate

• For movement and spatial change, animate only transform and opacity.
• For simple state feedback, color, background-color, and opacity transitions are acceptable.
• Never animate layout properties; never use transition: all.
• Avoid filter animation for core interactions; if unavoidable, keep blur <= 20px.
• SVG: apply transforms on a <g> wrapper with transform-box: fill-box; transform-origin: center.
• Disable transitions during theme switches.