Respecting Reduced‑Motion Preferences in CSS

A panel slides the full width of the screen after somebody saves a form. The movement is meant to draw attention to the confirmation, but the same large transition can be distracting or uncomfortable for somebody who has asked their operating system to reduce motion.

Removing the confirmation is not the answer. "Saved" still matters. The useful part of the interface is the state change; the journey across the screen is optional.

The Preference Available in 2018

Safari 10.1, released with macOS Sierra 10.12.4 and iOS 10.3 in March 2017, introduced the prefers-reduced-motion media feature. It reflects the user's Reduce Motion setting and can select a different set of CSS rules:

@media (prefers-reduced-motion: reduce) {  /* Reduced-motion treatment */}

WebKit's Safari 10.1 feature record documents that first implementation. It is an implementation anchor, not evidence of broad support. In January 2018, contemporary Chrome, Firefox, Edge, and Internet Explorer releases did not implement the media feature. A production support table was therefore short:

The later Chrome, Firefox, and Edge numbers matter because they confirm what was unavailable at the article date; they are not recommendations from the future. For a January 2018 implementation, treat the query as Safari‑first progressive enhancement.

Reduce is a Preference, Not a Ban

The preference says that the user would like less motion. It does not identify a diagnosis, tell us why the setting was chosen, or demand that every visual change be removed.

Movement that travels a long distance, changes scale dramatically, creates parallax, or loops without stopping deserves particular attention. A brief colour change may provide useful focus or state feedback without creating the same experience. The decision belongs to the effect and the information it carries, not to a global switch labelled "animation off".

Start with a Usable Static State

The safest pattern for a new component is to make the immediate state change work first. This save notice is hidden until the application adds is-visible:

<p class="save-status" role="status">Your changes have been saved.</p>

.save-status {  opacity: 0;  transform: none;}.save-status.is-visible {  opacity: 1;}

Without any animation support, the notice appears immediately and in its final position. Nothing depends on an intermediate frame.

Safari's own 2017 reduced‑motion demonstration included an explicit no-preference query. We can use that verified form to enhance only the environment which both understands the feature and has not received a request to reduce movement:

@media (prefers-reduced-motion: no-preference) {  .save-status {    transform: translateY(1rem);    transition: opacity 200ms ease, transform 200ms ease;  }  .save-status.is-visible {    transform: translateY(0);  }}

Supporting Safari gets the short entrance when there is no reduced‑motion preference. Safari with Reduce Motion gets an immediate fade state and no travel. Browsers which do not recognise the media query ignore the enhancement and keep the usable static version.

This static‑first approach is conservative in 2018: most browsers receive no motion at all. It suits new components where animation is a refinement rather than a product requirement.

Reduce an Existing Animation

An established site may already animate by default. In that case, a reduce query can override the particular movement for supporting Safari whilst leaving the existing experience elsewhere.

Consider an upload indicator with a rotating decoration and visible text:

<p class="upload-status">  <span class="upload-status__spinner" aria-hidden="true"></span>  Uploading annual-report.pdf</p>

@keyframes rotate-indicator {  to {    transform: rotate(360deg);  }}.upload-status__spinner {  display: inline-block;  width: 1rem;  height: 1rem;  border: 2px solid currentColor;  border-right-color: transparent;  border-radius: 50%;  animation: rotate-indicator 800ms linear infinite;}@media (prefers-reduced-motion: reduce) {  .upload-status__spinner {    border-right-color: currentColor;    animation: none;  }}

The loop stops and the decoration becomes a complete circle, but "Uploading annual‑report.pdf" remains visible. Completion and failure must likewise replace that sentence with a clear final status. Motion is reduced; progress meaning is preserved.

A common shortcut is a universal override:

@media (prefers-reduced-motion: reduce) {  * {    animation-duration: 0.001ms !important;    transition-duration: 0.001ms !important;  }}

This looks comprehensive, but it is difficult to reason about. Application code may wait for transitionend or animationend; an animation may supply an element's final visible state; an almost‑zero infinite loop still loops. A blanket duration change can remove feedback or disturb sequencing without explaining which movement was non‑essential.

Override named components instead. Stop a decorative loop. Replace a large transform with an immediate state. Shorten a small transition only when the remaining motion is appropriate. The CSS is longer, but the intent is reviewable.

Choosing What to Change

Begin with the motion that dominates the viewport or continues without user control. Large zooms, sliding page planes, parallax layers, and spinning backgrounds are strong candidates for a static alternative. The WebKit explanation of responsive design for motion gives period examples of replacing three‑dimensional and multi‑speed effects with simpler presentation.

Then check what the effect communicates. If an error shakes a field, retain an error message, styling, and a relationship to the field. If a panel's movement shows where it came from, provide a clear heading and focus position. If a loading animation indicates progress, keep visible progress text. Do not make the reduced state visually quiet but informationally empty.

Focus indicators and keyboard feedback are not decorative motion. Test them separately and keep them visible. An immediate focus‑ring change is usually more useful than suppressing the indication because it happens on screen.

Testing the Preference

In a period‑capable Safari environment, change the operating‑system setting rather than merely editing the CSS in Web Inspector. On macOS, use System Preferences, Accessibility, Display, Reduce Motion. On iOS 10.3, use Settings, General, Accessibility, Reduce Motion. Reload where necessary and record the exact operating‑system and Safari versions.

Exercise the same task in both states. Save the form, start and finish the upload, produce an error, and use every control by keyboard. Confirm that content and focus do not disappear, that success and failure remain distinct, and that unsupported browsers receive the intended static or default experience.

Do not treat the absence of movement as the whole test. The reduced version must still communicate what happened, and the ordinary version must remain operable without waiting for animation to finish.

Wrapping Up

prefers-reduced-motion gives CSS a way to respond to a preference that the user has already expressed. In early 2018 that opportunity is limited chiefly to Safari, which makes progressive enhancement essential.

Build the complete state first, add non‑essential movement deliberately, and reduce each effect without erasing its meaning. The best reduced‑motion treatment is not the one with the fewest keyframes. It is the one in which the same task, feedback, and understanding remain available with less movement.