作者：前端破壁人 （一个在郑州坚持深度思考的前端）
发布时间：2025年9月23日
📝 引言：动画“被禁”了？
上周，我在本地调试一个使用 animate.css 的项目时，突然发现：
所有动画都不执行了。
不是报错，不是卡顿，而是——
完全静止，像从未存在过一样。
我要跳起来！
👉 理论上应该“弹跳”，但页面上它纹丝不动。
我第一反应是：
- ❌ CDN 挂了？
- ❌ 类名写错了？
- ❌ 浏览器缓存？
但检查后发现：
✅ 文件加载正常
✅ 类名正确
✅ 其他样式生效
那为什么动画没了？
🔍 第一步：从 CSS 入手
我打开 DevTools，发现：
@media (prefers-reduced-motion: reduce) {
.animate__animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}
👉 animate.css 官方为了无障碍访问，默认在用户“偏好减少动画”时，将动画时长设为 1ms，相当于“禁用”。
我立刻测试：
console.log(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
// 输出：true
真相浮出水面：我的浏览器“告诉”网页：“请减少动画”。
但问题是——
我从来没有开启过“减少动画”啊！
🧩 第二步：排查浏览器设置
我检查了 Chrome 的设置：
chrome://settings/accessibility→ “页面应减少动画” → 已关闭chrome://flags→ 搜索reduced→ 无异常
重置 Chrome 设置，重启，依然 true。
更诡异的是：Edge 和 Firefox 也返回 true。
❗ 问题不在浏览器，而在系统。
💻 第三步：Windows 系统的“隐藏开关”
我打开 Windows 设置：
设置→辅助功能→显示→ “在 Windows 中播放动画” → 已关闭
👉 我记得我从未手动关闭它，但确实被关了。
更深层的原因是：
- 某些“优化软件”（如 360、电脑管家）会强制关闭动画以“提升性能”
- 或系统在“省电模式”下自动启用
我重新开启：
- ✅ “在 Windows 中播放动画”
- ✅
系统属性→性能选项→ 选择“调整为最佳外观”编辑
重启后，matchMedia 终于返回 false，animate.css 动画恢复正常！
⚠️ 为什么这个 Bug 很危险？
- 它不报错：页面看起来“正常”，只是动画没了
- 它跨浏览器：影响 Chrome、Edge、Firefox
- 它由系统控制：开发者容易忽略
- 它影响用户体验：用户看不到加载动画、交互反馈
✅ 如何避免？—— 三个建议
1. 开发时主动检查 prefers-reduced-motion
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
console.warn("⚠️ 系统已启用“减少动画”，当前动画可能被禁用");
}
2. 测试时模拟“减少动画”模式
在 DevTools 中：
- 打开
Rendering面板 - 勾选
Emulate CSS media feature prefers-reduced-motion: reduce - 验证你的动画是否有降级方案
3. 对于 JS 动画（如 anime.js），手动响应
const canAnimate = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (canAnimate) {
anime({ /* 播放动画 */ });
} else {
element.style.opacity = 1; // 直接显示
}
💬 写在最后：从崩溃到重生
我是一名在郑州工作的前端开发者。
毕业时，我投了上百份简历，面试被拒、薪资压到 5K，一度崩溃到不想再找。
但今天，当我解决这个“动画消失”的问题时，
我突然意识到：
我不是“找不到工作”的人，我是“能解决问题”的人。
技术的价值，不在于“会写代码”，
而在于——
当问题出现时，你能一层层剥开表象，找到根源。
这篇文章，献给所有在小城市、在低薪市场中挣扎的开发者：
别放弃深度思考，那是你最锋利的武器。
🔗 相关链接
💬 互动时间
你遇到过类似的“神秘 Bug”吗？
欢迎在评论区分享你的排查经历！
