用 background-position 做文字渐变流动动画必须同时满足：background-size≥200% 200%、关键帧终点为 background-position:-100% 0、且 -webkit-background-clip:text、background-clip:text、color:transparent 缺一不可，否则文字显示为纯黑或纯白。
直接说结论：用 background-position 做文字渐变流动动画，必须同时满足三件事——background-size 设为 200% 200%（或更大）、关键帧终点写成 background-position: -100% 0、且 -webkit-background-clip: text、background-clip: text、color: transparent 一个都不能少。漏掉任意一项，文字就只是黑/白纯色，根本看不到渐变。
为什么文字一加渐变就变黑或变白
这不是代码写错了，而是三个条件没凑齐：-webkit-background-clip: text 负责把背景“裁”成文字形状；background-clip: text 是标准属性，在 Firefox 中必须显式声明（哪怕带前缀的已存在）；color: transparent 必须手动设，不能靠继承或初始值。三者缺一，浏览器就当普通文字渲染，盖住背景。
- Chrome/Safari：有
-webkit-background-clip: text+color: transparent就能跑通 - Firefox：必须三者都写全，且顺序无关，但漏一个就回退到默认颜色（常是黑色）
- IE / Edge：直接忽略
background-clip: text，文字显示为color初始值
background-position 动画总在结尾“啪”一下跳回原位
常见错误是写成从 0% 50% 到 100% 50% 的位移。因为默认渐变图层宽度是 100%，位移到 100% 后刚好对齐边缘，没有冗余空间缓冲，视觉上就是断层、不连贯。
-
background-size必须 >100% 100%（推荐200% 200%或300% 100%），给背景图留出平滑滚动的“轨道” - 终点值必须是
background-position: -100% 0（不是100% 0），这样从0 0移到-100% 0，才能实现向左匀速流动，首尾无缝衔接 - 动画时长越长、
background-size越大，流动越慢；反之越快——这是控制节奏最直接的参数
animation-timing-function 该选 linear 还是 ease
必须选 linear。用 ease 或 ease-in-out 会让渐变“起步慢→中间快→收尾慢”，看起来像卡顿或抽搐，破坏流动感。
-
animation: gradient-move 4s linear infinite是最稳的选择 - 如果想加呼吸感，可叠加
opacity动画，但别动timing-function本身 - 避免在动画中读写
background-position（比如 JS 获取计算值），会强制触发重排；如需动态控制，加will-change: background-position提前提示浏览器
最容易被忽略的是：文字内容一旦通过 React/Vue 动态更新（比如 v-model 或 useState），父容器若意外重绘，整个动画可能重置——这不是 CSS 问题，而是框架层触发了 DOM 替换，得靠 key 稳定性或 shouldComponentUpdate 类机制规避。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
