Common animation transitions

Entry categories AccessibilityDesign
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.

Opinions and views expressed here don't necessarily reflect those of my employer.
Posted on