CSS Media Features - prefers-reduced-motion

CSS prefers-reduced-motion media feature allows checking if a user has enabled a setting on their device to reduce unnecessary animations. This setting informs the device's browser that the user has chosen an interface that removes, minimises, or substitutes motion-driven animations.

Possible Values

  • no-preference − This value denotes that the user has not indicated any specific preferences on their device. The keyword value is considered as false.

  • reduce − This value denotes that the user has activated the reduce motion setting on their device. The keyword value is considered as true.

Syntax

prefers-reduced-motion: no-preference|reduce;

CSS prefers-reduced-motion - Example

If you have the reduce motion setting turned on, the green box on this page will move more slowly and smoothly, and the background will turn pink and the text will have a line under it. If you don't have the reduce motion setting turned on, the green box will move normally, and the background will stay green.

  • pulse − This animation causes the element to pulse in size every four seconds.

  • dissolve − This animation causes the element to fade in and out every two seconds.

Follow steps on this link to emulate prefers-reduced-motion mode and test following examples.

Here is an example −

<html>
<head>
<style>
   .box {
      animation: pulse 4s linear;
      background-color: green;
      color: white;
      width: 160px;
      padding: 10px;
      border-radius: 5px;
   }
   @media (prefers-reduced-motion) {
      .box {
         animation: dissolve 2s linear;
         background-color: pink;
         text-decoration: overline;
      }
   }
   @keyframes pulse {
      0% {
         transform: scale(0.5);
      }
      50% {
         transform: scale(0.8);
      }
      100% {
         transform: scale(08.);
      }
   }
   @keyframes dissolve {
      0% {
         opacity: 0.7;
      }
      50% {
         opacity: 0.5;
      }
      100% {
         opacity: 0.7;
      }
   }
</style>
</head>
<body>
<div class="box">
   prefers-reduced-motion
</div>
</body>
</html>

CSS prefers-reduced-motion - no-preference Value

The @media query with (prefers-reduced-motion: no-prefernce) will disabled animations (The box will remain stationary) for users who prefer reduced motion.

Here is an example −

<html>
<head>
<style>
   .box {
      width: 220px;
      height: 100px;
      background-color: violet;
      animation: moveRight 2s linear infinite;
   }
   @keyframes moveRight {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100%);
      }
   }
   @media (prefers-reduced-motion: no-preference) {
      .box {
         animation: none; 
         transform: none; 
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">prefers-reduced-motion: no-preference</div>
   </div>
</body>
</html>

CSS prefers-reduced-motion - reduce Value

The @media query with (prefers-reduced-motion: reduce) checks for the user's preference for reduced motion. If the user has enabled a reduced motion setting on their device the box moving horizontally from left to right in a continuous loop.

Here is an example −

<html>
<head>
<style>
   .box {
      width: 220px;
      height: 100px;
      background-color: violet;
      animation: moveRight 2s linear infinite;
   }
   @keyframes moveRight {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100%);
      }
   }
   @media (prefers-reduced-motion: reduce) {
      .box {
         animation: none; 
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">prefers-reduced-motion: reduce</div>
   </div>
</body>
</html>

Following table shows how to enable reduced motion in Firefox on different operating systems:

Operating System How to enable reduced motion in Firefox
GTK/GNOME Settings > Accessibility > Seeing > Reduced animation
Older versions of GNOME GNOME Tweaks > General tab (or Appearance, depending on version) > Animations
Plasma/KDE System Settings > Workspace Behavior -> General Behavior > "Animation speed" set to "Instant"
Windows 10 Settings > Ease of Access > Display > Show animations in Windows
Windows 11 Settings > Accessibility > Visual Effects > Animation Effects
macOS System Preferences > Accessibility > Display > Reduce motion
iOS Settings > Accessibility > Motion
Android 9+ Settings > Accessibility > Remove animations
Firefox about:config Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion.
Advertisements