Animation Spec Template for Product Managers

Most UI animations should be between 100ms and 400ms. Below 100ms, the human eye cannot perceive the transition, so it adds latency without visual benefit. Above 400ms, the interface starts to feel sluggish. Microinteractions (button press, toggle) work best at 100-150ms. Component transitions (modals, dropdowns) work best at 200-300ms. Page-level transitions can go up to 400-500ms.

Use CSS transitions for simple state changes (hover, active, enter/exit) where you can define the start and end state declaratively. Use JavaScript animations (via Web Animations API or a library like Framer Motion) for complex choreography, spring physics, interrupted animations, or sequences that depend on runtime values. The animation spec should be implementation-agnostic. Define the behavior and let engineering choose the best tool.

Record the implemented animation at 60fps using browser DevTools or a screen recorder. Compare frame-by-frame against the storyboard. Use DevTools' animation inspector to verify easing curves and durations match the spec. For reduced motion, enable the `prefers-reduced-motion` emulation in Chrome DevTools and verify the fallback behavior matches the spec.

Not individually, but you should define a global hover convention in the Motion Principles section. For example: "All interactive elements use opacity: 0.8 on hover with duration-instant easing." Individual hover specs are only needed when a component deviates from the global convention. ---