真正可控的颜色渐变动画必须用 linear-gradient() 配合 background-position 位移实现，因 background-color 的 RGB 插值会产生灰调脏色；需设置 background-size（如200% 200%或400% 400%）避免跳帧；文字渐变须加 -webkit-background-clip: text 前缀并设 color: transparent。
纯色背景无法用 @keyframes 实现真正可控的“颜色渐变动画”，必须用 linear-gradient() 配合 background-position 位移来模拟流动感——这是最常被误以为能直接过渡颜色、结果却调出灰调脏色的根本原因。
为什么 background-color 动画看起来脏？
浏览器对 background-color 的插值是 RGB 通道线性混合，比如从 #ff6b6b 到 #4ecdc4，中间必然经过大量低饱和度、偏灰的过渡色。设计要的是明快、有方向的色彩流动，不是混色器里的渐变灰。
真正可用的方案只有一条路：background-image: linear-gradient() + background-position 动画。
- 渐变本身是静态图像，不参与颜色插值
-
background-position移动时，人眼感知的是色彩区块在平滑扫过 - 只要
background-size足够大，就能避免边缘露白或跳帧
background-position 动画必须配 background-size
这是 90% 的人复制代码后动画“不动”的原因：只写了 animation 和 linear-gradient()，但没设 background-size。
立即学习“前端免费学习笔记（深入）”；
background-size 至少得大于 100% 100%，常见安全值是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
200% 200%：适合小容器或快节奏动画 -
400% 400%：全屏加载层推荐，流动更舒缓，iOS 16.4+ 兼容稳定 - 若渐变方向是
45deg，background-position建议用0% 50%→100% 50%水平扫过；-45deg同理
加载动画里别乱用 animation-fill-mode: forwards
在全屏加载层中加 animation-fill-mode: forwards，动画停住后背景卡在某帧的 background-position，和后续真实背景色完全对不上——因为终态不是你页面主背景想要的起始位置。
正确做法：
- 用
DOMContentLoaded事件（不是window.onload）触发移除加载层 - 如果必须保留 DOM 元素做锚点，确保终帧
background-position: 0% 50%，且渐变色顺序与主背景一致 - 动画时长控制在
1.2s–1.8s最稳妥：短于 1s 用户感知弱，长于 2s 易被当成卡顿
文本渐变容易漏掉 -webkit-background-clip: text
实现文字渐变效果时，background-clip: text 是核心，但它在 Safari 和旧版 Chrome 中必须搭配 -webkit-background-clip: text 才生效。
漏掉前缀会导致文字显示为默认黑/白，渐变完全不可见——这不是 bug，是渲染引擎差异。
完整写法必须包含：
color: transparentbackground-image: linear-gradient(...)background-clip: text-webkit-background-clip: text
另外注意：父容器不能有 background-color 覆盖，否则会压住所有 background-image 层。
