prefers-reduced-motion - CSS: Cascading Style Sheets
the prefers-reduced-motion css media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
...*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @key...
...frames dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that specification.

Web accessibility for seizures and physical reactions - Accessibility
prefers-reduced-motion support for prefers-reduced-motion in modern browsers is growing.
... @media screen and (prefers-reduced-motion: reduce) { } @media screen and (prefers-reduced-motion) { } to see a great example of how to use the code prefers-reduced-motion, visit the mdn document, prefers-reduced-motion, or see the example below from the section on new in chrome 74.
... button { animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { button { animation: none; } } prefers-color-scheme this can be useful if the ambient light api is not available.
...And 2 more matches

Accessibility: What users can do to browse more safely - Accessibility
learn personalization and accessibility settings firefox 73 and above (dekstop) firefox added support for css prefers-reduced-motion in october 2018.
...examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows 10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from tho...
...or maybe, don't, if the user prefers-reduced-motion!").

@media - CSS: Cascading Style Sheets
prefers-reduced-motion the user prefers less motion on the page added in media queries level 5.
...for example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses.
... adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.

Accessibility documentation index - Accessibility
85 accessibility: what users can do to browse more safely color, epilepsy, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, user settings, web animation this article discusses making web content accessible for those with vestibular disorders, and those who support them, by taking advantage of personalization and accessibility settings built into the operating systems.
... 105 web accessibility for seizures and physical reactions media queries, peat, photosensitve epilepsy analysis tool, the harding test, color, epilepsy, musicogenic seizures, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, web animation this article introduces concepts behind making web content accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions.

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <div class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.

Using media queries - CSS: Cascading Style Sheets
prefers-reduced-motion the user prefers less motion on the page added in media queries level 5.

scale() - CSS: Cascading Style Sheets
also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

transform - CSS: Cascading Style Sheets
also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.