docs(animation): add documentation and guides for creating animations

[saiponnada]

Description

Few areas to work on,

Motion Accessibility (a11y) Standards & Best Practices

• Respecting User Preferences (prefers-reduced-motion)
  • Standard boilerplate and strategy for handling prefers-reduced-motion: reduce.
  • Guidelines on when to remove motion entirely vs. substitute with non-triggering alternatives (e.g., swapping a 500px slide-in for a quick, subtle cross-fade).
• Vestibular & Motion Trigger Safety
  • Rules to avoid triggers for vestibular disorders (e.g., avoiding large-scale directional movements, intense parallax, rapid scaling, or spatial disorientation).
• WCAG Compliance Checks
  • WCAG 2.3.1 (Three Flashes or Below Threshold): Ensuring custom keyframes never exceed flashing/blinking thresholds that could trigger seizures.
  • WCAG 2.2.2 (Pause, Stop, Hide): Guidance and patterns for providing manual controls on custom continuous/looping animations lasting longer than 5 seconds (e.g., custom carousels, animated hero banners, ambient loops).
• Focus Management & Assistive Tech Timing
  • Ensuring focus state shifts and DOM updates align properly with animation lifecycles (e.g., moving focus into a custom drawer after or as it animates, avoiding screen reader announcement drops mid-transition).

Screenshots

No response

Figma link

No response

Engineering pre-requisites

• Successful design review with Design System Team.
• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).
• Successful accessibility review with Core A11Y Team and MIND pattern is created.
• Successful frontend review with eBayUI Team.

[ArtBlue]

@saiponnada , we already have an animation guides page. We should leverage that and expand it.

https://opensource.ebay.com/evo-web/guides/animation