结论：纯CSS无法实现平滑全屏渐变动画，必须用matchMedia监听断点切换预设类名，并禁用background-attachment: fixed；需适配prefers-reduced-motion降级为单色背景。
怎么用 @keyframes 做全屏背景渐变动画但不卡顿
直接说结论：不能靠纯 CSS 动画驱动渐变色的实时响应，@keyframes 里写死的色值不会随视口变化自动重算。你看到的“响应式渐变动效”，本质是用媒体查询触发不同动画片段，或靠 JS 监听 resize + matchMedia 主动切换类名。
常见错误现象是：加了 width: 100vw; height: 100vh; 和 animation: bgFade 8s infinite;，结果在手机上动画跳帧、颜色过渡生硬、甚至整个背景闪烁——根本原因是浏览器对 background-image: linear-gradient(...) 的动画支持极弱，CSS 标准里它压根不是可动画属性。
- 真正能平滑动画的只有
background-color（单色）、opacity、transform这类合成层友好属性 - 如果非要用渐变色动，得拆成多个固定色值的
@keyframes片段，按断点分别定义，比如mobile-fade/desktop-fade - 动画时长别低于 4s，否则小屏设备 GPU 解码压力大，容易掉帧
用 matchMedia 监听断点并切换渐变类名
这是目前最稳的方案：CSS 只管定义好各尺寸下的渐变背景和对应动画，JS 负责监听媒体查询状态变更，动态加/删 class。比纯 CSS 方案更可控，也避免了动画重绘抖动。
使用场景很明确——你需要在 max-width: 768px 切换一组深蓝→紫灰的渐变，在桌面端切到青蓝→暖橙，且动画要衔接自然。
立即学习“前端免费学习笔记（深入）”；
- 必须用
matchMedia而不是window.matchMedia的一次性判断，否则窗口缩放时不会触发更新 - 监听回调里不要直接操作
style.backgroundImage，改用 class 切换，让 CSS 引擎统一调度渲染 - 给切换加个
transition: background-image 0.3s ease没用——浏览器不支持该属性过渡，只会立刻跳变；改用opacity叠加层淡入淡出更可靠
示例关键代码：
const media = window.matchMedia('(max-width: 768px)');<br>const updateBg = () => {<br> document.body.classList.toggle('bg-mobile', media.matches);<br> document.body.classList.toggle('bg-desktop', !media.matches);<br>};<br>media.addEventListener('change', updateBg);<br>updateBg(); // 初始化
background-attachment: fixed 在响应式渐变里的坑
加了这个属性想让背景“贴住视口不动”，结果在 iOS Safari 上整页卡死、动画撕裂——这是真问题，不是配置错。
性能影响非常明显：开启 fixed 后，浏览器必须为背景层单独建合成图层，而渐变背景又无法硬件加速，导致每帧都要 CPU 重绘，尤其在滚动+动画同时发生时。
- 移动端一律禁用
background-attachment: fixed，用transform: translateZ(0)强制提升图层也没用，根源在渐变本身不可加速 - 如果设计强制要求视差效果，改用两个
div层叠：底层用position: fixed放静态渐变图（PNG），上层用透明度动画模拟“流动感” - 检查 DevTools 的 Rendering 面板，勾选 “Paint flashing”，能看到渐变区域是否高频重绘——闪红越频繁，越该砍掉
fixed
为什么不用 prefers-reduced-motion 就可能被投诉
这不是可选项。iOS 和 macOS 系统级开关一旦打开，你的全屏渐变动效就会被强制禁用，但如果你没适配，页面可能只剩一片空白背景或错位色块。
真实报错场景：无障碍测试工具扫出“未响应减少动画偏好”，导致政企项目验收不通过；或者用户开了系统精简动画后，发现按钮悬停失效、轮播卡死——因为你的 JS 动画逻辑没拦截 reduceMotion 状态。
- 必须用
@media (prefers-reduced-motion: reduce)覆盖所有动画相关样式，包括animation、transition、transform - JS 侧调用
window.matchMedia('(prefers-reduced-motion: reduce)').matches判断，避免启动定时器或 requestAnimationFrame - 别只关动画，把渐变也降级为单色背景，否则高对比度模式下可能文字完全不可读
这事没法靠“用户自己关掉”解决，系统级偏好会直接绕过浏览器设置生效。
