Skip to main contentSkip to filter inputPrimer

Motion and animation

Content that moves, flashes, auto-updates, or animates can be distracting, hard to keep up with, or even harmful to some users. Use motion intentionally and give people control over it.

Overview

Content that moves, flashes, auto-updates, or animates can make a webpage or app feel more appealing, but it can also be distracting, hard to keep up with, and in some cases harmful. When using motion in your designs and implementations, consider whether it is essential, and provide ways for people to control it.

Why?

Motion can have negative physical, cognitive, and emotional effects on people, including nausea, headaches, migraines, seizures, anger, confusion, distraction, frustration, and difficulty reading. This can affect a wide range of people with permanent, temporary, and situational disabilities.

People with photosensitive epilepsy

Rapidly flashing or bright lights with red and high-contrast flashes can trigger seizures in people with photosensitive epilepsy.

People with vestibular disorders

Symptoms like motion sickness, headaches, and nausea can be triggered in people with vestibular disorders when looking at animations.

People with cognition or learning difficulties

Moving content presented in parallel with other page content can distract some people, particularly those with attention deficit disorders. Continuous animation can make it difficult to concentrate on the content they want to read.

If animations contain text, they can present a barrier to anyone who has trouble scanning stationary text, such as people with dyslexia, as well as anyone who has trouble tracking moving objects.

People with low vision

People with low vision who browse with screen magnification may be distracted when moving, flashing, auto-updating, or animated content takes up part of the visible area of the page they are using.

People with temporary or situational limitations

The same motion sensitivities apply to people whose limitations are temporary (for example, recovering from illness or a concussion) or situational (for example, browsing on a moving vehicle or in bright light). Designing motion that's safe for people with permanent conditions extends to many more people in these moments.

Reasons for motion

When using motion, think about why you are using it. Motion typically falls into one of three categories:

  • Notifications and feedback: to update people on changes within the UI. Examples include a bell icon that moves when a new message appears, animated push notifications, and loading or progress animations.
  • Editorial: to communicate information or concepts. Examples include animated illustrations that explain complex ideas, and videos.
  • Design: to enhance engagement and provide visual delight, without conveying additional editorial or functional meaning. Examples include parallax scrolling, auto-updating carousels, and decorative transitions.

Motion in the "design" category is the most likely to cause harm without adding value. Use it sparingly, if at all.

Formats

Different motion formats need different approaches.

  • Animated GIFs should always have alternative text and don't provide a built-in way to pause or stop. Prefer formats that the user can control.
  • CSS effects and animations can run automatically or in response to user interaction. Prefer techniques that respect the user's reduced motion preference.
  • Video can be controlled with player controls (play/pause, mute, volume). Ideally, video should be opt-in rather than autoplay.
  • JavaScript-based animations that explicitly set CSS styles for HTML or SVG elements should also respect the user's reduced motion preference.

Guidelines

The first step is to consider whether motion is needed at all. If motion is appropriate, use at least one of the following techniques without affecting the content's meaning or losing essential information:

  • Stop the animation after five seconds
  • Give people control over the animation and movement

In addition you must:

  • Provide an alternative for informative animations
  • Avoid or minimize flashing content

In all cases, aim to keep animation subtle.

Stop animation after five seconds

For minor animations, such as an attention-catching effect on a control where separate play and pause buttons aren't practical, stop the movement automatically after five seconds and hold a static end state. A bell icon that nudges once when a notification arrives and then settles draws attention without becoming a permanent distraction.

Do

Cap short, attention-catching animations at five seconds, then hold a static end state.

Don’t

Let a minor animation loop indefinitely with no way to pause or stop it.

Give people control over the animation and movement

If motion lasts more than five seconds, either it must not start automatically, or people must be able to stop it. This typically means a visible "Pause" or "Stop" control placed near the animation, for example a clearly labelled pause control on an auto-updating carousel.

Do

Give animations longer than five seconds a visible "Pause" or "Stop" control, or don't start them automatically.

Don’t

Autoplay long-running motion with no way for people to stop it.

Support reduced motion

One way to give people control over CSS-based animations is to check whether the user has enabled the reduced motion setting in their browser or operating system, using the prefers-reduced-motion media query.

@media (prefers-reduced-motion: no-preference) {
  /* Animations and transitions go here */
}

You can also check the media query from JavaScript to control more complex behaviour, such as pausing automatic animations until the user explicitly opts in.

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')

function applyMotionPreference() {
  if (mediaQuery.matches) {
    // Reduced motion requested: don't start JavaScript-based animations
  } else {
    // No preference: animations may run
  }
}

// Apply on initial load, then whenever the preference changes
applyMotionPreference()
mediaQuery.addEventListener('change', applyMotionPreference)

Avoid or minimize flashing content

People can be affected by flashing before they have a chance to pause it or set a system-level preference, so flashing carries the highest stakes of any motion on this page. Keep flashing within the WCAG three-flashes threshold:

  • Never flash more than three times in any one second.
  • Keep any flashing area small, below the general and red-flash thresholds (roughly a 341×256px block on a standard display).
  • Never flash saturated red or colours in the red spectrum.

If you can't guarantee these limits, don't use flashing at all. Replace it with a non-flashing treatment such as a static badge or a slow, low-contrast fade.

Do

Keep any flashing under three flashes per second, small in area, and away from saturated red.

Don’t

Use large, rapid, or red-spectrum flashes that can trigger seizures.

Provide an alternative for informative animations

Avoid using animation to convey information. When an animation is genuinely informative and can't be avoided, provide a text alternative that carries the same information for people who have reduced motion turned on or can't perceive the animation. Place the description next to the animation, or behind a disclosure such as a "View animation description" toggle, so it's available without playing the motion.

Do

Pair an informative animation with a text alternative, such as a "View animation description" disclosure, that conveys the same information.

Don’t

Rely on animation alone to communicate essential information.

Make animations subtle

Subtle animations, sometimes called micro animations, can be helpful for alerting people to small changes on a page (for example, a bell icon that moves when a new message arrives). The key is to keep the movement small enough that it isn't distracting while still being noticeable.

Do

Keep micro animations small and contained, like a single status check resolving to a green check.

Don’t

Animate large areas or many elements at once in a way that pulls attention from the content.

For designers

In your designs, identify any motion or animation and document its purpose, duration, and whether the user can pause or stop it. Annotate which animations should respect prefers-reduced-motion. Avoid using motion to convey essential information without an alternative.

For engineers

Wrap CSS transitions and animations in @media (prefers-reduced-motion: no-preference) so they don't run for users who have asked for reduced motion. For JavaScript-driven motion, check window.matchMedia('(prefers-reduced-motion: reduce)') and adjust behaviour accordingly. Make sure motion can be paused or stopped if it lasts longer than five seconds.

Additional resources

Related WCAG guidelines and success criteria