CSS `prefers-reduced-motion`：为运动敏感用户提供动画控制

各位观众老爷，大家好！今天咱们来聊聊一个特别贴心、能让网页更人性化的 CSS 属性：prefers-reduced-motion。别看它名字长，其实用起来简单得很，能帮助咱们照顾到那些对动画比较敏感的用户，让他们也能舒舒服服地浏览网页。

一、啥是 prefers-reduced-motion？

简单来说，prefers-reduced-motion 是一个 CSS 媒体查询属性，它能检测用户的系统是否启用了“减少动画”或类似的辅助功能设置。如果用户启用了这个设置，prefers-reduced-motion 就会告诉浏览器“嘿，这个用户不喜欢太多花里胡哨的动画，咱们悠着点！”

这个属性有两个值：

no-preference: 表示用户没有明确的偏好设置。也就是说，用户既没有明确要求减少动画，也没有明确表示喜欢动画。这种情况下，咱们可以按照默认的动画效果来处理。
reduce: 表示用户启用了“减少动画”的设置。这时候，咱们就应该尽量避免使用复杂的、大幅度的动画效果，转而使用更简洁、更静态的呈现方式。

二、为什么要关心 prefers-reduced-motion？

你可能会觉得：“动画多炫酷啊！不用动画，网页多单调！” 但是，我们要考虑到用户的感受。对于某些用户来说，过多的动画可能会引起：

眩晕和恶心: 特别是快速闪烁、大幅度移动的动画，容易让人感到不适。
分心和干扰: 动画可能会分散用户的注意力，影响他们阅读和理解网页内容。
认知负担: 某些用户可能需要花费更多精力来处理动画，增加他们的认知负担。

因此，尊重用户的偏好，为他们提供更舒适的浏览体验，是咱们前端开发者的责任。 prefers-reduced-motion 就是一个帮助咱们实现这个目标的利器。

三、如何使用 prefers-reduced-motion？

prefers-reduced-motion 的使用方法非常简单，就像其他 CSS 媒体查询一样。咱们可以在 CSS 中使用 @media 规则来检测用户的偏好，并根据不同的偏好应用不同的样式。

1. 关闭动画：

这是最简单、最直接的做法。当用户启用“减少动画”设置时，咱们直接关闭所有动画效果。

/* 默认情况下，应用动画 */
.element {
  transition: all 0.3s ease-in-out;
  transform: translateX(0);
}

/* 当用户启用“减少动画”时，移除动画 */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none; /* 禁用过渡效果 */
    transform: translateX(0) !important; /* 确保元素回到初始位置 */
  }
}

在这个例子中，我们首先为 .element 元素应用了一个过渡效果，让它在 transform 属性改变时产生动画。然后，我们使用 @media (prefers-reduced-motion: reduce) 规则来检测用户是否启用了“减少动画”设置。如果用户启用了，我们就将 transition 属性设置为 none，彻底禁用过渡效果，并且强制元素回到初始状态，避免任何残留的动画效果。

2. 简化动画：

如果完全关闭动画会让网页显得过于单调，我们可以考虑简化动画效果。例如，将复杂的平移动画改为简单的淡入淡出效果。

/* 默认情况下，应用平移动画 */
.element {
  animation: slideIn 0.5s ease-out forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 当用户启用“减少动画”时，应用淡入淡出动画 */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: fadeIn 0.3s ease-in-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

在这个例子中，默认情况下，.element 元素会从左侧平移进入屏幕。当用户启用“减少动画”设置时，我们将动画改为淡入淡出效果，避免了大幅度的移动，更加柔和。

3. 移除不必要的动画：

有些动画可能只是为了增加视觉效果，对网页的功能没有任何实际作用。对于这些动画，我们可以直接移除。

/* 默认情况下，应用背景闪烁动画 */
.button {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    background-color: #007bff;
  }
  50% {
    background-color: #0056b3;
  }
  100% {
    background-color: #007bff;
  }
}

/* 当用户启用“减少动画”时，移除背景闪烁动画 */
@media (prefers-reduced-motion: reduce) {
  .button {
    animation: none;
  }
}

在这个例子中，按钮默认会有一个背景闪烁的动画效果。当用户启用“减少动画”设置时，我们直接移除这个动画，让按钮保持静态。

四、实际应用场景举例：

1. 滚动到页面特定位置：

默认情况下，点击链接滚动到页面特定位置时，会有一个平滑的滚动动画。对于启用“减少动画”设置的用户，我们可以直接跳到目标位置，避免滚动动画。

// JavaScript 代码
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');

smoothScrollLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();

    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);

    if (targetElement) {
      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        // 用户启用了“减少动画”设置，直接跳到目标位置
        targetElement.scrollIntoView({ behavior: 'instant' });
      } else {
        // 用户没有启用“减少动画”设置，使用平滑滚动
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
  });
});

在这个例子中，我们使用 JavaScript 来检测用户是否启用了“减少动画”设置。如果用户启用了，我们就使用 scrollIntoView({ behavior: 'instant' }) 方法直接跳到目标位置。否则，我们使用 scrollIntoView({ behavior: 'smooth' }) 方法进行平滑滚动。

2. 模态框的显示和隐藏：

默认情况下，模态框的显示和隐藏通常会伴随着淡入淡出或滑动等动画效果。对于启用“减少动画”设置的用户，我们可以直接显示和隐藏模态框，避免动画。

/* 默认情况下，模态框显示时使用淡入动画 */
.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

/* 当用户启用“减少动画”时，直接显示和隐藏模态框 */
@media (prefers-reduced-motion: reduce) {
  .modal {
    transition: none;
  }

  .modal.show {
    opacity: 1;
    visibility: visible;
  }
}

在这个例子中，我们首先为 .modal 元素添加了一个过渡效果，让它在 opacity 属性改变时产生淡入淡出动画。然后，我们使用 @media (prefers-reduced-motion: reduce) 规则来检测用户是否启用了“减少动画”设置。如果用户启用了，我们就将 transition 属性设置为 none，直接显示和隐藏模态框，避免动画。

3. 轮播图的切换：

默认情况下，轮播图的切换通常会伴随着滑动或淡入淡出等动画效果。对于启用“减少动画”设置的用户，我们可以直接切换图片，避免动画。

// JavaScript 代码 (简化示例)
const carousel = document.querySelector('.carousel');
const slides = carousel.querySelectorAll('.slide');
let currentIndex = 0;

function showSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  slides[index].classList.add('active');
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    // 用户启用了“减少动画”设置，直接切换图片
    showSlide(currentIndex);
  } else {
    // 用户没有启用“减少动画”设置，使用动画切换图片 (需要 CSS 支持)
    carousel.style.transition = 'transform 0.5s ease-in-out';
    carousel.style.transform = `translateX(-${currentIndex * 100}%)`;

    setTimeout(() => {
      carousel.style.transition = 'none'; // 动画结束后移除过渡效果
      showSlide(currentIndex);
    }, 500);
  }
}

// 自动切换轮播图
setInterval(nextSlide, 3000);

在这个例子中，我们使用 JavaScript 来控制轮播图的切换。如果用户启用了“减少动画”设置，我们就直接调用 showSlide() 函数切换图片。否则，我们使用 CSS 过渡效果来实现动画切换，并在动画结束后移除过渡效果，以防止后续的切换出现问题。

五、 prefers-reduced-motion 的兼容性：

prefers-reduced-motion 的兼容性还是相当不错的，主流浏览器都支持。

浏览器	支持版本
Chrome	74+
Firefox	63+
Safari	10.1+
Edge	79+
Opera	61+
iOS Safari	10.3+
Android Browser	74+

如果需要兼容更老的浏览器，可以使用 JavaScript 来检测用户的系统设置，并手动应用相应的样式。不过，对于大多数现代网站来说，直接使用 prefers-reduced-motion 已经足够了。

六、最佳实践：

优先考虑用户体验: 在设计动画效果时，要时刻考虑用户的感受。避免使用过于刺激、容易引起不适的动画。
提供明确的控制选项: 如果可能，为用户提供手动控制动画效果的选项。例如，允许用户关闭所有动画。
使用 prefers-reduced-motion: 尽可能使用 prefers-reduced-motion 来检测用户的偏好，并根据不同的偏好应用不同的样式。
测试不同场景: 在不同的浏览器和设备上测试你的网页，确保 prefers-reduced-motion 能够正常工作。
逐步增强: 先实现网页的基本功能，然后再逐步添加动画效果。确保即使没有动画，网页也能正常使用。
代码可读性: 编写清晰、易懂的代码，方便维护和调试。

七、总结：

prefers-reduced-motion 是一个非常有用的 CSS 属性，能帮助咱们为运动敏感用户提供更好的浏览体验。通过合理地使用 prefers-reduced-motion，咱们可以让网页更加人性化、更加易用，让所有用户都能愉快地访问我们的网站。希望大家在以后的开发工作中，多多使用 prefers-reduced-motion，让我们的网页更加友好！

好了，今天的讲座就到这里。希望大家有所收获！下次再见！

发表回复 取消回复

发表回复取消回复