没有运动总是不喜欢减少动作

许多开发人员在解决prefers-reduced-motion媒体查询时使用常见的CSS片段。如果用户在操作系统中启用了减少运动设置，则该片段旨在消除网站上的所有动作。但是，这种方法并不总是理想的。

 @Media（预先减少的动作：降低）{
  * {
    动画效果：0.01ms！重要；
    动画 - 识别计数：1！重要；
    过渡效果：0.01ms！重要；
    卷轴行为：自动！重要；
  }
}

prefers-reduced-motion的重要性

prefers-reduced-motion设置解决了与屏幕运动有关的可及性问题。对于患有前庭疾病，偏头痛或癫痫发作诱因的人，过多的动画可能会使人衰弱。正如埃里克·贝利（Eric Bailey）所指出的那样，网络浏览可以成为意外动画的雷区。

对抑制的微妙

虽然完全消除所有动画的冲动很强烈，但这通常会适得其反。动画可以通过澄清复杂的交互或元素之间的关系来增强可访问性。完全禁用动画可以消除这些有益的方面。更细微的方法是可取的。减少，放慢或修改动画，而不是完全消除它们。

本·纳德尔（Ben Nadel）展示了一种出色的方法，使用多个@keyframes提供完整的动画和减少动作版本。例如，默认情况下，模态可能同时使用淡入淡入和扩展，但仅在prefers-reduced-motion活动时才淡入。

 / *默认：减少运动动画 */
@KeyFrames模式 - 输入{
  来自{不透明度：0; }
  到{不透明：1; }
}

/ *替代无偏见：完整动画 */
@Media（偏爱降低：无偏爱）{
  @KeyFrames模式 - 输入{
    来自{不透明度：0;变换：比例尺（0.7）; }
    到{不透明：1;变换：比例尺（1.0）; }
  }
}

这种方法优先考虑对所有动作的毯子禁令进行周到的，减少的动作解决方案。

超越CSS：JavaScript动画

初始CSS片段仅有效地管理CSS驱动的动画。正如乔什·科莫（Josh Comeau）所观察到的那样，JavaScript动画可能会表现得不可预测，可能导致意想不到的后果，例如非常快速和迷失方向的动画。因此，全面的策略必须同时考虑CSS和JavaScript动画。

以上是没有运动总是不喜欢减少动作的详细内容。更多信息请关注PHP中文网其他相关文章！