The Art of Accessible Animations

Animations can enhance user experience, but they must be implemented thoughtfully to avoid excluding users who prefer reduced motion.

The prefers-reduced-motion Media Query

Always wrap animations in a reduced-motion check:

@media (prefers-reduced-motion: no-preference) {
  .animate-in {
    animation: fadeSlide 0.3s ease-out;
  }
}

Safe Properties

Stick to transform and opacity for animations. Avoid animating layout properties like width, height, or top/left.