媒体查询——动画减弱

CSS发展到今天已经能做出很多酷炫的动画了，然而不是所有人都对动画感到适应，这也是许多系统都有减弱动画功能的原因。

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

no-preference：用户未修改系统动画相关特性。

css

@media (prefers-reduced-motion: no-preference) {
}

reduce：这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。

css

@media (prefers-reduced-motion: reduce) {
}

下面的动画可以通过尝试修改系统设置来关闭

HTML

<div class="animation">animated box</div>

CSS

css

  @keyframes vibrate{
    0%{
      transform:translate(0)
    }
    20%{
      transform:translate(-2px,2px)
    }
    40%{
      transform:translate(-2px,-2px)
    }
    60%{
      transform:translate(2px,2px)
    }
    80%{
      transform:translate(2px,-2px)
    }
    100%{
      transform:translate(0)
    }
  }
  .animation {
  animation: vibrate 0.3s linear infinite both;
  }

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

animated box

参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion

媒体查询——动画减弱 ​

媒体查询——动画减弱