prefers-reduced-motion is a CSS media query that detects whether the user enables the Reduced Animation setting in the system, thereby controlling the display of web animations based on user preferences. It is used in the form of @media (prefers-reduced-motion: value), common values include no-preference (default), reduce (reduce animation), and motion (enable animation). 1. Can be used to control transition animations (such as button color gradients), 2. Manage keyframe animations (such as rotation, fade), 3. Adjust page scrolling or parallax effects to improve the friendliness of visually sensitive users. Non-essential animations should be handled selectively during use, and simulation settings can be debugged through browser developer tools.

You may have heard of the CSS media query prefers-reduced-motion , but you are not sure how or why it is used. Simply put, it is used to detect whether the user has enabled the "Reduce Animation" option in the system settings. This feature is very useful if you want your website to be more friendly to users with visually sensitive issues.

What is prefers-reduced-motion ?

This is a media feature that allows you to control whether certain animations or transition effects are applied in CSS based on user preferences. For example, some people are more sensitive to fast flashing or sliding animations, and they may turn on the "Reduce Action" option in the operating system. At this time, you can provide a quieter and more stable interface through this media query.

It does not automatically remove all animations for you, but gives you a basis for judgment - you need to write the corresponding style rules yourself.

How to use it? Basic syntax

Its syntax is simple, like this:

 @media (prefers-reduced-motion: no-preference) {
  /* The user does not require the reduction of animations only when the user does not specifically require it*/
  .fade-in {
    animation: fadeIn 1s ease-out;
  }
}

There are three common values:

• no-preference : The user has not set any preferences
• reduce : Users want to minimize animation and motion
• motion : The user explicitly wants to enable animation (this is not very common)

Usually we only care about the first two, and most of the time we will wrap the part that needs animation in @media (prefers-reduced-motion: no-preference) .

Where should I use it? Suggestions for common scenarios

1. Transitions

Many buttons and menus will have transition animations when expanding and closing. If the user does not want these, you can use media query control.

 .button {
  transition: background-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

2. Keyframe Animations

If you use custom animations, such as fade, load rotation, etc., you can disable or replace them with static styles within the media query.

 @keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

3. Page scrolling or parallax effect

Some websites have scroll-triggered animations and parallax backgrounds, which can also be adjusted according to user preferences.

 .parallax {
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .parallax {
    background-attachment: scroll;
  }
}

Tips and notes

• It takes effect according to the settings of the user device , and different browsers will not override this settings.
• Instead of using it as a switch to completely turn off the animation of the entire website, selectively deal with the "non-essential but affecting the experience" animation.
• During debugging, you can simulate user preferences (Chrome DevTools > Rendering > Emulate prefers-reduced-motion) through browser developer tools.
• If you are using a front-end framework or UI component library, remember to check whether they already have built-in support for prefers-reduced-motion .

Basically that's it. Although it seems that only adds a layer of media inquiry, it can make your website more considerate to users with special needs. It is a small change but meaningful feature.

The above is the detailed content of How to use the CSS `prefers-reduced-motion` media query?. For more information, please follow other related articles on the PHP Chinese website!