# Best Practices for prefers-reduced-motion Accessibility in Modern Animations

> Implement prefers-reduced-motion accessibility in modern animations. Learn best practices to eliminate transform animations and preserve feedback with opacity and color changes.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: best-practices
- Published: 2026-07-30

---

**Modern UI animations must respect the user's system-level Reduced Motion preference by eliminating transform-based movement while preserving essential visual feedback through opacity and color changes.**

Implementing `prefers-reduced-motion` accessibility ensures users with vestibular disorders can interact comfortably with animated interfaces without sacrificing usability. The `emilkowalski/skills` repository encodes authoritative guidance on handling reduced motion preferences across animation standards, Apple Design principles, and concrete component implementations.

## Core Principles from the Source Code

The repository establishes architectural principles for accessible animations through several key files.

### Preserve Essential Feedback Without Motion

According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) (line 62), you should **never eliminate feedback entirely** when reducing motion. Users still require visual cues for state changes like button activation or selection. The standard mandates keeping opacity or color changes while removing movement-heavy transforms that could cause discomfort.

### Prefer Opacity and Color Over Transform

The Apple Design skill in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (line 200) expands this guidance by advising a swap from slides, springs, and parallax effects to short opacity cross-fades. Color changes that aid comprehension should be retained, as these properties are less likely to trigger vestibular issues compared to `translate`, `scale`, or `rotate` operations.

### Gracefully Disable Heavy Motion

The [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) component (line 70) demonstrates concrete implementation: all transform transitions are disabled inside a `@media (prefers-reduced-motion: reduce)` block. This pattern ensures the UI respects the user's explicit preference for gentler motion while maintaining functional state transitions.

## Practical Implementation Strategies

### CSS-Only Media Query Approach

For standard CSS implementations, wrap transform-based transitions in a reduced-motion media query and set them to `none` or replace them with simple fades:

```css
/* Normal animation */
.button {
  transition: background-color 150ms ease, transform 250ms var(--ease-out);
  transform: translateY(0);
}

/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: background-color 150ms ease; /* keep color fade */
    transform: none;                         /* drop movement */
  }
}

```

This pattern follows the explicit recommendation in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) for the `.proto-picker` component, ensuring consistent behavior across the codebase.

### React Hook Integration

When using Framer Motion or similar libraries, leverage the `useReducedMotion` hook to programmatically adjust animation properties:

```tsx
import { useReducedMotion } from 'framer-motion';

function FancyCard() {
  const shouldReduce = useReducedMotion(); // respects the media query
  const animation = shouldReduce
    ? { opacity: 1, transform: 'none' }          // cross-fade only
    : { opacity: 1, transform: 'translateY(0)' }; // normal slide-in

  return (
    <motion.div
      initial={{ opacity: 0, transform: 'translateY(20px)' }}
      animate={animation}
      transition={{ duration: 0.2, ease: 'easeOut' }}
      className="card"
    />
  );
}

```

As documented in [`APPLE-DESIGN.md`](https://github.com/emilkowalski/skills/blob/main/APPLE-DESIGN.md), this approach mirrors the CSS media query while providing JavaScript-level control over animation variants.

### Guarding Hover Effects

Touch devices fire false hover events, and reduced-motion users may have hover disabled. Combine `prefers-reduced-motion` with pointer media queries to conditionally enable hover effects:

```css
/* Enable hover scaling only on devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .icon:hover {
    transform: scale(1.08);
    transition: transform 120ms ease-out;
  }
}

/* Ensure reduced-motion users never get the scale */
@media (prefers-reduced-motion: reduce) {
  .icon:hover {
    transform: none;
  }
}

```

This pattern aligns with the accessibility recommendations in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) for preventing unintended motion on incompatible devices.

## Summary

- **Reference [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)** (line 62) for core animation accessibility standards that mandate preserving opacity and color feedback while eliminating transforms.
- **Use `@media (prefers-reduced-motion: reduce)`** to wrap all transform-based transitions and set them to `none` or replace with opacity fades.
- **Implement `useReducedMotion` hooks** in React applications to dynamically adjust animation properties based on system preferences.
- **Combine with `@media (hover: hover) and (pointer: fine)`** to prevent false hover animations on touch devices and ensure reduced-motion preferences extend to interactive states.
- **Maintain consistent timing** (≤ 200ms) and easing curves across both reduced-motion and normal animation paths to preserve perceived responsiveness.
- **Test implementations** by inspecting computed styles in browser dev tools with "Reduced motion" enabled to verify only intended properties change.

## Frequently Asked Questions

### What is prefers-reduced-motion and why does it matter?

`prefers-reduced-motion` is a CSS media query that detects when users have requested minimal non-essential motion at the system level, typically to prevent vestibular disorders like motion sickness or vertigo. According to the `emilkowalski/skills` repository standards, respecting this preference is essential for inclusive design, ensuring users can interact with interfaces comfortably without disabling all visual feedback.

### Which CSS properties are safe to animate when reduced motion is enabled?

Opacity and color properties (such as `background-color`, `border-color`, or `opacity`) are considered safe for reduced-motion users, as implemented in [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) (line 70) and recommended in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (line 200). Properties involving spatial movement—including `transform`, `translate`, `scale`, `rotate`, and `scroll-behavior`—should be disabled or set to instant transitions.

### How do I test reduced motion implementations effectively?

Enable "Reduced motion" in your operating system's accessibility settings, then inspect computed styles in browser developer tools to verify that transform transitions are disabled while opacity/color transitions remain active. The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) file recommends verifying that only intended properties change under the `@media (prefers-reduced-motion: reduce)` block to prevent unintended transforms from persisting.

### Should I completely remove all animations for users who prefer reduced motion?

No, you should not eliminate all animations. As specified in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), users still need visual cues for state changes. Instead of removing feedback entirely, replace motion-heavy animations with subtle opacity fades or color shifts that communicate state changes without causing physical discomfort. This ensures the interface remains responsive and understandable for all users.