Ubuntu下Firefox中prefers-reduced-motion导致Bootstrap 4动画失效如何解决？

我之前也碰到过这个问题！Ubuntu默认开启的减少动画辅助功能会向浏览器发送prefers-reduced-motion: reduce的媒体查询信号，而Bootstrap 4为了遵循无障碍设计规范，会自动禁用轮播项的过渡动画。给你几个不同层面的解决方案，按需选择：

1. 系统层面关闭减少动画设置（永久生效） #

图形界面操作： #

• 打开Ubuntu的系统设置，找到「辅助功能」（Accessibility）选项
• 在「视觉」分类下，找到「减少动画」（Reduce motion）的开关，将其关闭即可

终端命令操作（适合GNOME桌面，Ubuntu默认桌面环境）： #

• 打开终端，执行以下命令开启系统动画：

  gsettings set org.gnome.desktop.interface enable-animations true
  

• 若要确认当前设置状态，可以执行：

  gsettings get org.gnome.desktop.interface enable-animations
  

  返回true即为已开启动画，false则是关闭状态

2. Firefox浏览器临时修改（仅对当前浏览器生效） #

如果你只想在Firefox里测试动画，不想改动系统设置，可以这样操作：

• 在Firefox地址栏输入about:config，回车后确认风险提示
• 在搜索框中输入ui.prefersReducedMotion，将该配置项的值改为0（默认值为1，对应reduce模式）
• 重启Firefox后，Bootstrap的轮播动画就能正常工作了

3. CSS层面强制覆盖（仅针对当前项目生效） #

如果不想修改系统或浏览器设置，想在前端项目里强制启用轮播动画，可以在你的自定义CSS文件中添加以下代码：

@media screen and (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: transform 0.6s ease-in-out !important;
  }
}

这段代码会直接覆盖Bootstrap默认的禁用过渡规则，强制轮播项使用原有的动画效果

内容的提问来源于stack exchange，提问作者vatosarmat