How can I make animate.css animations respect prefers-reduced-motion without disabling them completely?

[spinzo-cyber]

I'm using animate.css for some UI transitions and currently have elements using classes like animate__animated animate__fadeIn. I'd like the animations to be disabled or significantly reduced for users who enabled "Reduce Motion" in their browser settings.

Does animate.css provide a built-in way to handle this, or should I add my own CSS using @media (prefers-reduced-motion: reduce)?

I'd like the animation to be skipped while keeping the element visible and functional.

[barry166]

Animate.css already handles this in the full stylesheet. Its built-in @media print, (prefers-reduced-motion: reduce) rule sets animation and transition durations to 1ms and limits iteration count to 1, so animate__fadeIn completes immediately while the element remains visible. You only need a custom override if you import individual animation files without the base stylesheet; the relevant rule is in animate.css.

[spinzo-cyber]

thanks, this helped!