必须配background-size是因为渐变本质是静态背景图，只有当background-size大于容器时，background-position才有移动空间；若为auto或100% 100%，则严丝合缝无位移余量。
渐变背景动画不是靠切换 background-color 实现的，而是用 linear-gradient() 配合 background-position 位移来“动”起来；直接 animating background 或只写 background 不设 background-size，动画基本无效。
为什么 background-position 动画必须配 background-size？
渐变本质是一张“图片”，background-position 只有在背景图比容器大时才有可移动空间。如果 background-size 是默认的 auto 或 100% 100%，那它就严丝合缝贴在元素上，background-position: 100% 50% 也移不出任何效果。
-
background-size: 200% 200%是常用起点：提供横向和纵向各一倍的冗余空间 - 多色复杂渐变（比如 4 色 45deg）建议用
400% 400%，避免颜色带在循环点断裂 - 不要写
background-size: cover或contain—— 它们会重置为自适应尺寸，动画立刻失效 - 移动端 Safari 对
background-size值敏感，避免用小数如199.9%，统一用整数
animation 关键帧里 background-position 怎么写才不跳变？
常见错误是 0% 和 100% 写成同一值但中间突变，或用了 to top 这类关键词——它们不参与插值计算，浏览器会退化为离散跳变。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 始终用百分比或像素值，例如
0% { background-position: 0% 50%; }、50% { background-position: 100% 50%; } - 起止点保持一致（如都用
50%垂直居中），否则动画末尾会“弹回” - 别写
to right或from/to颜色停靠点——这些是声明语法，不是动画属性值 - 缓动函数优先选
ease-in-out，linear在长周期动画里容易晕眩
body 上直接加动画为什么滚动时会抖？
因为 body 默认不是定位上下文，background-attachment 的行为在滚动中不稳定，尤其 Chrome 下会触发重绘撕裂。
- 正确做法是额外加一层
<div id="bg"></div>，设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 绝对不能给
body或html设overflow: hidden来“修复抖动”——这会锁死滚动，破坏可访问性 - 若需全屏响应式，用
height: 100vh而非100%，避免嵌套高度塌陷 - 动画时长建议 ≥8s，低于 5s 在 iOS 上易被系统判定为“强制动画”而降帧
radial-gradient 动画怎么避免圆心偏移？
径向渐变的 at 位置参数本身不能被动画，强行 animating 会触发回退或渲染异常；真正能动的只有 background-position，但它对 radial-gradient 的影响远不如线性明显。
- 想实现“光斑游走”效果，不要 animating
radial-gradient(circle at 20% 30%, ...)—— 无效 - 改用两层：底层固定径向渐变（如暗角），上层用
linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent)+background-position模拟高光移动 - 圆心偏移问题多出现在未设
background-origin: border-box时，加上它可统一参考系 - Firefox 对
radial-gradient动画支持弱，建议降级为linear-gradient方案保底
最易被忽略的是：所有渐变动画都依赖硬件加速，但 background-position 默认不触发 GPU；加一句 transform: translateZ(0) 或 will-change: background-position（仅限关键元素）才能真正稳帧——不过后者滥用会反向拖慢性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
