prefers-reduced-motion
A standard CSS media query feature that allows web pages to detect a user's operating-system-level preference for reduced motion. It is used to provide static or minimal alternatives for motion-sensitive users and is a basic requirement of web accessibility.
Timeline (last 90 days)
A correct reduced-motion fallback should completely remove the animation, jump to the end state, or use a static replacement image, rather than simply animation-play-state: paused
prefers-reduced-motion is a user preference setting in CSS media queries; when the user enables reduced motion at the operating system level, the browser exposes this flag to the page
A common incorrect fallback is to freeze the current frame (animation-play-state: paused), causing the image to stop mid-rotation, halfway through scaling, or midway through a fade-in at partial opacity, which is even more likely to cause discomfort for motion-sensitive users
Developers should provide a static or minimalist alternative for the opening envelope animation that relies on complex transition effects through @media (prefers-reduced-motion: reduce), and ensure that the body of the letter can be read without waiting for the animation to finish.
Users with vestibular dysfunction, migraine, or motion sensitivity enable the operating system-level "reduce motion" setting to avoid discomfort caused by parallax scrolling, large displacements, or continuous animation.
scroll-behavior has been stably supported across major browsers for more than four years, and prefers-reduced-motion is fully supported in all mainstream browsers
Smooth scrolling should be wrapped with @media (prefers-reduced-motion) to accommodate users sensitive to vestibular motion, while the scroll-margin positioning effect is still preserved after animations are disabled
Success Criterion 2.3.3 of the WCAG 2.1 standard requires websites to comply with the "Animation from Interactions" guideline and to respect the prefers-reduced-motion preference setting.
All Facts (8)
A correct reduced-motion fallback should completely remove the animation, jump to the end state, or use a static replacement image, rather than simply animation-play-state: paused
50%Unverifiedprefers-reduced-motion is a user preference setting in CSS media queries; when the user enables reduced motion at the operating system level, the browser exposes this flag to the page
50%UnverifiedA common incorrect fallback is to freeze the current frame (animation-play-state: paused), causing the image to stop mid-rotation, halfway through scaling, or midway through a fade-in at partial opacity, which is even more likely to cause discomfort for motion-sensitive users
50%UnverifiedDevelopers should provide a static or minimalist alternative for the opening envelope animation that relies on complex transition effects through @media (prefers-reduced-motion: reduce), and ensure that the body of the letter can be read without waiting for the animation to finish.
50%UnverifiedUsers with vestibular dysfunction, migraine, or motion sensitivity enable the operating system-level "reduce motion" setting to avoid discomfort caused by parallax scrolling, large displacements, or continuous animation.
50%Unverifiedscroll-behavior has been stably supported across major browsers for more than four years, and prefers-reduced-motion is fully supported in all mainstream browsers
50%UnverifiedSmooth scrolling should be wrapped with @media (prefers-reduced-motion) to accommodate users sensitive to vestibular motion, while the scroll-margin positioning effect is still preserved after animations are disabled
50%UnverifiedSuccess Criterion 2.3.3 of the WCAG 2.1 standard requires websites to comply with the "Animation from Interactions" guideline and to respect the prefers-reduced-motion preference setting.
50%