How can I make CSS animations accessible?

How can I make CSS animations accessible?

To make CSS animations accessible, consider using reduced motion preferences and ensure animations don't cause discomfort.

What is the reduced motion preference?

The reduced motion preference is a user setting that allows individuals to minimize or disable animations for accessibility.

How do I implement reduced motion in my CSS?

You can use the @media (prefers-reduced-motion: reduce) media query in your CSS to apply styles for users who prefer less motion.

Can you give me an example of using that in CSS?

Sure! Here's an example:

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}