必须配background-size，因渐变本质是静态图，只有图大于容器才有位移空间；用200%或400%可提供平滑移动范围，禁用cover/contain以防重置尺寸中断动画。
直接用 background-color 过渡实现不了渐变动画——浏览器根本不支持对 linear-gradient() 的颜色值做插值过渡。真正能动起来的，只有 background-position 配合足够大的 background-size。
为什么 background-position 动画必须配 background-size？
渐变在 CSS 里本质是一张“静态背景图”。background-position 要生效，这张图得比容器大；否则它严丝合缝贴死，移不动。
-
background-size: auto或100% 100%→ 无位移空间，动画无效 -
background-size: 200% 200%→ 横纵各多出一倍冗余，background-position才有从0% 50%到100% 50%的平滑移动范围 -
background-size: 400% 400%→ 多色复杂渐变（如 4 色 45deg）推荐，避免循环点出现色带断裂 - 禁用
cover/contain—— 它们会重置尺寸，动画立刻中断
关键帧里 background-position 怎么写才不跳变？
跳变不是动画慢，是值没写对。浏览器对关键词（如 to right）不插值，只对数值做线性计算。
- 始终用百分比或像素：例如
0% { background-position: 0% 50%; }、100% { background-position: 100% 50%; } - 起止点垂直值保持一致（如都用
50%），否则动画结束会“弹回” - 别写
to top、from #fff这类声明式语法——它们不是动画属性值，浏览器直接忽略或降级为硬切 - 缓动优先选
ease-in-out；linear在长周期里容易引发视觉疲劳
body 上加动画为什么滚动时抖？
因为 body 默认不是定位上下文，background-attachment 在滚动中行为不可控，Chrome 下尤其易触发重绘撕裂。
- 正确做法：加一层
<div id="bg"></div>，设position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; - 绝对不要给
html或body加overflow: hidden来“压”抖动——这等于锁死滚动，破坏可访问性 - 移动端 Safari 对
background-size敏感，避免小数（如199.9%），统一用整数 - 动画时长建议 ≥8s；iOS 系统对
最易被忽略的一点：径向渐变（radial-gradient()）的 at 圆心位置参数本身不能被动画，强行改会导致渲染异常；唯一可靠可动的仍是 background-position，但它对圆心偏移几乎无感——想动圆心，得换思路，比如用两层叠加 + opacity 交叠模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
