Common animation transitions

Posted on Category: Accessibility, Design
Kleine Welten I (Small Worlds I) (1922) print in high resolution by Wassily Kandinsky. Original from The MET Museum. Digitally enhanced by rawpixel.

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.

My opinions & views expressed may not reflect my employer's.