Skip to main content
A11yCSS

Reduce Motion for View Transition API

The browser View Transition API is a new tool to achive transitions between pages on a website.

However, as with other animation mechanisms such as CSS transitions, it is essential to consider accessibility for users who prefer reduced motion. Providing a motion-free experience ensures a better and more inclusive user experience.

Below is Astro’s solution for disabling animations on the View Transition API when users have enabled the reduced motion preference in their OS settings:

css
@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

Explanation of the code:

  1. Media Query prefers-reduced-motion: reflects the user's system settings for reduced motion
  2. The selectors ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*): targets the pseudo-elements responsible for handling the transition animations