应使用@keyframes定义平滑颜色渐变动画，统一用十六进制或hsl()格式，时长1.2s–1.6s，infinite循环，timing-function设为ease-in-out，并可叠加opacity微调与will-change优化，避免linear导致的机械感和可访问性问题。
用 @keyframes 定义颜色渐变动画，别直接改 color 或 background-color 写死值
加载中闪烁不是“一下红一下蓝”那种硬切，人眼会卡顿。真要自然，得用 @keyframes 描绘平滑过渡，比如从浅灰到主色再到半透灰。浏览器对 color 和 background-color 的动画支持稳定，但如果你写成 rgb(200, 200, 200) → #3b82f6 这种格式混用，部分旧版 Safari 会跳帧或干脆不动。
实操建议：
- 统一用十六进制或
hsl()，比如#e5e7eb → #3b82f6 → #d1d5db - 动画时长控制在
1.2s到1.6s之间，太短像抖动，太长不像“正在加载” - 加
animation-iteration-count: infinite，否则只闪一次就停了
animation-timing-function 选 ease-in-out，不是 linear
加载状态需要一点“呼吸感”，linear 匀速变色看着机械、冷硬，用户潜意识会觉得“卡住了”。ease-in-out 让颜色变化开头慢、中间快、结尾又慢，更接近真实加载的节奏感。
常见错误现象：用了 linear 后，设计师说“这个 loading 看着好假”——其实问题就在这一行。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 别省略声明，显式写上
animation-timing-function: ease-in-out - 如果想强化“脉冲感”，可叠加
animation-delay: -0.3s让多个元素错峰启动 - 避免和
transform动画共用同一 timing function，容易视觉打架
用 opacity 配合颜色动画，比纯改颜色更安全
有些场景下，比如深色背景上的浅色文字，只调 color 会让对比度突变，触发可访问性警告（尤其 WCAG AA 级要求）。更稳妥的做法是固定颜色，靠 opacity 微调明暗，再叠一层轻微色相偏移。
使用场景：按钮 loading 文字、表单输入框 placeholder、卡片骨架图中的文本占位符。
实操建议：
- 主色设为
color: #4b5563，再用opacity: 0.6 → 1 → 0.7模拟闪烁 - 加
will-change: opacity提前提示浏览器优化渲染路径 - 别对
opacity做0 → 1全切，人眼对完全透明敏感，建议范围控制在0.55–1之间
IE 不支持 @keyframes？用 animation-name 回退到 JS 轮询或伪元素
现在多数项目已不兼容 IE，但如果真要保，@keyframes 在 IE10+ 才支持，且必须带 -ms- 前缀。更麻烦的是 IE 对 animation-fill-mode 解析异常，常导致第一帧卡住。
性能影响：纯 CSS 动画在低端安卓机上可能掉帧，特别是同时跑多个闪烁元素时。这时候用 JS 控制 class 切换反而更可控。
实操建议：
- IE11 及以下，改用
::after伪元素 +visibility: hidden/visible交替显示 - 用
requestAnimationFrame替代setTimeout控制闪烁节奏，减少 jank - 所有闪烁类名加命名空间前缀，比如
loading-blink-text，避免和第三方 UI 库冲突
真正难的不是让颜色动起来，而是让动得不抢戏、不干扰阅读、不误判加载状态。多试两轮真机预览，比写十遍 keyframes 都管用。
