我的animate 动画失效了[B君笔记][博客]

noscript{position: fixed}我的animate 动画失效了日常分享创建时间：2021-10-09 22:25:30

我的动画没生效

Animate.css 是我们常用的css动画，前几天打包完测试突然发现它失效了。
一开始还以为是包打出了问题了，还调试了不少时间，把自己整懵逼了。当我回到它官网Animate.css想再看看是哪里除了问题时，我发现了一句话。

Hey! It seems that you have animations disabled on your OS, turning Animate.css off.
Animate.css supports the prefers-reduced-motion CSS media feature. You can read more about it here.

原因

我不知道什么时候手贱，关闭了 “在windows 中显示动画”
如图:

prefers-reduced-motion

CSS 媒体查询特性，用于检测用户的系统是否被开启了动画减弱功能。
当我关闭了 “在windows 中显示动画”，prefers-reduced-motion 会由默认的no-preference改为reduce。如下文代码 .animation 动画就会被移除。

.animation {
  animation: vibrate 0.3s linear infinite both;
}

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

animate.css reduce部分代码

@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}

关闭动画时，失效的动画元素，在chrome devtool css上显示如下

弱动画配置js监测

每次修改系统设置后，流览器应该要经过一小会才会弹提示

var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
  if (motionQuery.matches) {
    /* adjust motion of 'transition' or 'animation' properties */
    alert('adjust motion')
  } else { 
    /* standard motion */
    alert('standard motion')
  }
}
motionQuery.addEventListener('change',handleReduceMotionChanged);
handleReduceMotionChanged();

开启动画减弱的作用

减少 UI 开销
照顾前庭障碍

各个系统开启了动画减弱功能

在火狐中，满足以下条件则 reduce 会生效:

在 GTK/Gnome 中，可以通过 GNOME Tweaks （在“通用”或“外观”菜单中，取决于具体版本）的配置，设置 gtk-enable-animations 的值为 false。
可以在 GTK 3 的配置文件中的 [Settings] 模块下设置 gtk-enable-animations = false。
在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。
在 Windows 7 中：控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画。
在 MacOS 中：系统偏好 > 辅助使用 > 显示 > 减少运动。
在 iOS 上：设置 > 通用 > 辅助性 > 减少运动。
在 Android 9+ 上：设置 > 辅助性 > 移除动画。

参考文章

prefers-reduced-motion
Responsive Design for Motion