prefers-reduced-motion 媒体查询特性

prefers-reduced-motion 用于检测用户的系统是否开始了动画减弱功能。是一个css媒体查询特性

值

• reduce： 用户开启了动画减弱功能
• no-preference： 用户未修改系统动画相关特性

// 设置动画效果
.animation {
  animation: vibrate 0.3s linear infinite both;
}

// 如果开启了动画减弱功能，则移除动画
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

MDN介绍