Animation

Updated May 12, 2026

Animated GIFs

Use an animation only if it serves a real purpose and is actually necessary.
Developers can use the prefers-reduced-motion CSS media query to detect a user's system motion preferences, and apply CSS to disable motion if required.

Warning

A user who misses the beginning of the animation can’t view it again without refreshing the page. It’s possible the image will have loaded before it comes into the viewport, so may have already played through once.

Best practices

Make sure an animated GIF loops a finite number of times, totalling no more than 5 seconds. This not a likely scenario, but is possible to achieve. Further guidance on setting animated GIF images to stop blinking.
Use an alt attribute to describe exactly what happens in the animation.
Embed the animated GIF within the element as a progressive enhancement for users who have an operating system that supports the prefers-reduced-motion API and don’t have prefers-reduced-motion switched on. Otherwise, provide a static alternative that clearly conveys the message in the GIF. For guidelines on the progressively enhanced implementation of prefers-reduced-motion, see this blog post on progressively enhanced animated content.
Ensure the file size doesn’t take the page weight past the agreed performance budget.
Limit the duration of an animation to under 5 seconds.
Offer a way to disable an animation that's triggered when a user interacts with an element and lasts more than 5 seconds.
Use a video format, such as MP4 to give the user control of the animated content.
Don't use a blinking or flashing animation or loading effect. Check that dynamic technologies don't accidentally result in flashing.

Resources

Date	Change
September 2024	Copied information from Accessibility hub.