A while back when reviewing common animation transitions for pages & elements I compiled a massive list of web-based motion and how I recommend you use them.

Remember, using a ‘prefers-reduced-motion’ fallback doesn’t mean you must remove all animation. Reduce X or Y pixel movement and keep transition speeds gentle. Crossfades, color shifts, and blurs are totally fine. This accessibility setting is for users with vestibular disorders, those with sensory overload, or those with attention deficit disorder. Enjoy!

If you are interested in learning more about why common animation transitions are affected by accessibility considerations, take a look at my Accessibility Jumpstart series.