记录一个css媒体查询属性prefers-reduced-motion-一一网

个人随记-css小技巧

这个属性是我在解决页面之间的过度效果的时候发现的一个小技巧, 在切换页面的时候, 页面数据回来后, 由于页面渲染的动画太多, 部分机型会出现卡顿情况; 这里其中的一个解决方向是, 当检测到当前机型开启了动画减弱功能时候, 相对减少一些元素的动画展示;

用法
prefers-reduced-motion有两个值可取
no-preference
用户未修改系统动画相关特性。
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+ 上：设置 > 辅助性 > 移除动画。

demo代码

// HTML部分
<div class="animation">蹦跶</div>
复制代码

// css部分
    .animation {
        animation: vibrate 0.5s linear infinite both;
        background-color: green;
        color: #fff;
        width: 200px;
        padding: 1em;
        border-radius: 1em;
        text-align: center;
        margin-left: 300px;
        margin-top: 200px;
      }

      @media (prefers-reduced-motion: reduce) {
        .animation {
          animation: none;
        }
      }
      
      @keyframes vibrate {
        0% {
            transform: translate(0);
        }
        20% {
            transform: translate(-20px, 0px) scale(1.1);
        }
        40% {
            transform: translate(-20px, 0px) scale(1.1);
        }
        60% {
            transform: translate(30px, 0px) scale(0.8);
        }
        80% {
            transform: translate(30px, 0px) scale(0.8);
        }
        100% {
            transform: translate(0);
        }
      }

复制代码