Accessible Motion Design: Animation Guidelines for Reduced Motion Users

Create accessible motion design guidelines for [PRODUCT NAME], balancing engaging animations with safety for users with motion sensitivity.\\\\\\\\n\\\\\\\\n**Motion Classification:**\\\\\\\\n\\\\\\\\nSafe animations (always allowed):\\\\\\\\n- Opacity transitions (fade in/out)\\\\\\\\n- Color transitions\\\\\\\\n- Scale changes (subtle, <10%)\\\\\\\\n- Progress indicators\\\\\\\\n\\\\\\\\nConditional animations (respect prefers-reduced-motion):\\\\\\\\n- Translational movement (slide, pan, fly)\\\\\\\\n- Rotational animations\\\\\\\\n- Parallax effects\\\\\\\\n- Auto-playing content\\\\\\\\n- Bounce and spring animations\\\\\\\\n\\\\\\\\nProhibited animations (never allowed):\\\\\\\\n- Flashing content (>3 flashes per second)\\\\\\\\n- Auto-playing video with sound\\\\\\\\n- Infinite scrolling animations\\\\\\\\n- Large-scale parallax\\\\\\\\n\\\\\\\\n**Implementation Strategy:**\\\\\\\\n\\\\\\\\nCSS media query:\\\\\\\\n\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`css\\\\\\\\n@media (prefers-reduced-motion: reduce) {\\\\\\\\n  /* Replace motion with opacity transitions */\\\\\\\\n  .animated-element {\\\\\\\\n    animation: none;\\\\\\\\n    transition: opacity 0.2s ease;\\\\\\\\n  }\\\\\\\\n}\\\\\\\\n\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\n\\\\\\\\nJavaScript detection:\\\\\\\\n\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`javascript\\\\\\\\nconst prefersReducedMotion = window.matchMedia(\\\\\\\\n  '(prefers-reduced-motion: reduce)'\\\\\\\\n);\\\\\\\\n\\\\\\\\nif (prefersReducedMotion.matches) {\\\\\\\\n  // Disable or simplify animations\\\\\\\\n}\\\\\\\\n\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\n\\\\\\\\n**Animation Guidelines:**\\\\\\\\n- Duration: 200-500ms for UI feedback\\\\\\\\n- Easing: ease-out for entering, ease-in for exiting\\\\\\\\n- Purpose: every animation must communicate meaning\\\\\\\\n- Performance: 60fps, GPU-accelerated properties only\\\\\\\\n- Control: pause/stop controls for any animation >5 seconds\\\\\\\\n\\\\\\\\n**Alternative Experiences:**\\\\\\\\n- For carousels: static grid with navigation\\\\\\\\n- For parallax: static background\\\\\\\\n- For page transitions: instant cut or fade\\\\\\\\n- For loading: static skeleton instead of shimmer\\\\\\\\n\\\\\\\\n**Testing:**\\\\\\\\n- Test with prefers-reduced-motion enabled\\\\\\\\n- Test with screen reader + reduced motion\\\\\\\\n- User testing with vestibular disorder participants\\\\\\\\n- Automated checks in CI pipeline\\\\\\\\n\\\\\\\\nInclude animation token definitions and code examples for [FRAMEWORK].