background-position动画必须配background-size，因为渐变被当作背景图处理，只有当背景图物理尺寸大于容器（如200%或400%）时，background-position才有移动空间；用cover/contain会重置尺寸导致动画失效，且起止值须统一用百分比（如0% 50%→100% 50%）并显式声明timing-function和fill-mode以防跳变闪回。
background-color 动画无法实现平滑渐变切换——浏览器不支持对整个 linear-gradient() 值做插值过渡。真正能动起来的，是靠 background-position 在一张“超大渐变图”上持续位移。
为什么 background-position 动画必须配 background-size？
渐变在 CSS 里被当作一张背景图像处理。background-position 只有在背景图物理尺寸大于容器时才有移动空间。默认 background-size: auto 或 100% 100% 会让渐变严丝合缝贴住元素，background-position: 100% 50% 也移不出任何效果。
-
background-size: 200% 200%是最常用起点：横向和纵向各留出一倍冗余空间 - 多色复杂渐变（如 5 色 45deg）建议用
400% 400%，避免循环点出现色带断裂 - 绝对不要用
cover或contain—— 它们会重置为自适应尺寸，动画立刻失效 - 移动端 Safari 对小数敏感，避免
199.9%，统一用整数如200%
keyframes 里 background-position 怎么写才不跳变？
常见错误是起止值不一致，或混用关键词（如 to right），导致浏览器退化为离散跳变而非连续插值。
- 始终用百分比或像素值：
0% { background-position: 0% 50%; }、100% { background-position: 100% 50%; } - 起止点垂直坐标保持一致（如都用
50%），否则动画末尾会“弹回” - 别写
to top、from left这类声明式语法——它们不是动画属性的有效值 - 中间关键帧建议用
50% { background-position: 100% 50%; }，形成对称流动感
animation 属性必须显式声明哪些参数？
只写 animation: gradient 15s infinite; 在部分浏览器（尤其是旧版 Safari）可能失效，因为缺省值会触发意外行为。
- 务必包含
animation-timing-function，推荐linear（匀速）或ease-in-out（首尾缓动） - 加
animation-fill-mode: forwards锁定终态，防止动画结束后闪回初始色 - 若用于加载页，建议时长控制在
1.2s–1.8s：太短看不出效果，太长让用户误以为卡顿 - 避免同时设置
animation-delay和infinite，除非你明确需要错峰启动多层动画
background-size 的整数要求、background-position 插值必须用可计算值、以及 animation-fill-mode 缺失导致的闪回——这些不是“偶尔出问题”，而是特定设备上必现的断裂点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
