CSS Animations Best Practices

Animations can greatly enhance user experience, but they should be used responsibly.

Poorly implemented animations can cause performance issues (like skipping frames or draining battery life) and can negatively impact accessibility for users with vestibular disorders.

Performance Best Practices

When animating elements, try to stick to properties that can be offloaded to the GPU (Graphics Processing Unit). Animating properties that trigger layout recalculations (often called "reflows") or repaints can cause stuttering.

Good to Animate: transform (translate, scale, rotate) and opacity.
Bad to Animate: width, height, margin, padding, top, left, etc.

For example, if you want an element to move across the screen, it's better to use transform: translateX() instead of animating the margin-left property.

Accessibility (a11y) Best Practices

Animations should not be intrusive or disorienting. Web Content Accessibility Guidelines (WCAG) suggest that users should be able to pause, stop, or hide animations that start automatically, last more than 5 seconds, and are presented in parallel with other content.

The `prefers-reduced-motion` Media Query

Operating systems allow users to specify that they prefer reduced motion. You can detect this preference using CSS media queries and remove or simplify your animations accordingly.

View Output

By respecting the prefers-reduced-motion setting, you ensure that your website is comfortable and safe for all users.

How to Test `prefers-reduced-motion`

You can easily test this media query without changing your actual operating system settings by using your browser's Developer Tools. For example, in MacOS using Chrome/Edge/Brave:

Open Chrome/Edge and go to the webpage you want to test.
Open Developer Tools (Cmd + Option + I).
Open the Command Menu: Press Cmd + Shift + P.
Type "reduced" and select" Emulate CSS prefers-reduced-motion: reduce".

The browser will update to show what the page would look like if someone has prefers-reduced-motion enabled. If you don't see the effect you may need to refresh the page. You may need to do steps 3 and 4 again to disable the emulation and return it to normal.

Animatable Properties

If you're wondering exactly which CSS properties can and cannot be animated, check out our full list of Animatable CSS Properties.