骨架屏呼吸感应通过 background-position 位移渐变实现而非换色；使用三段式线性渐变、background-size 翻倍、shine 动画控制位移，避免 background-color 动画引发重绘卡顿。
用 background-position 移动渐变实现骨架屏呼吸感
骨架屏不是靠“换颜色”才有加载感，而是靠渐变背景的持续位移制造流动错觉。固定色块切换反而生硬，还容易触发重绘。
关键不是改颜色，是让 linear-gradient 的起点和终点在容器内匀速滑动：
-
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)—— 三段式浅灰渐变，避免单色平铺死板 -
background-size: 200% 100%—— 宽度翻倍，给位移留出空间 -
animation: shine 2s infinite—— 动画名自定义，时长建议 1.5–2.5s，太快像闪烁，太慢失去加载暗示
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}别直接改 background-color 做动画——重绘开销大且卡顿
CSS 动画中，background-color 变更会强制触发 Layout + Paint，尤其在列表项或高频更新区域（如聊天消息骨架），帧率明显下跌。
真要换色，只适用于极简单元素（比如一个按钮占位图），且必须满足两个条件：
立即学习“前端免费学习笔记（深入）”；
- 元素无边框、无阴影、无 transform，否则 Paint 范围扩大
- 使用
will-change: background-color提前提示渲染引擎（但别滥用，会增加内存） - 颜色值必须用十六进制或 rgb()，避免 hsl() 或命名色——部分旧浏览器对 hsl 动画支持不稳定
@keyframes 切换颜色适合有明确状态过渡的场景
比如从“加载中”渐变为“加载完成”的占位区块，此时颜色变化是语义化的，不是纯装饰。
注意三点：
- 起止色差不能太大，
#e0e0e0 → #d0d0d0比#f0f0f0 → #4caf50更安全，后者易造成视觉突兀 - 务必加
animation-timing-function: ease-out，让结束帧放缓，模拟自然收敛 - 如果配合 JS 控制，用
element.classList.add('loaded')触发动画比内联 style 更可控
移动端 Safari 对 background-position 动画有兼容性陷阱
iOS 15.4 之前，background-position 在 transform: scale() 或 contain: layout 元素里可能卡住不动。
绕过方法很简单：
- 去掉父级的
contain: layout（骨架屏本身不需要强隔离） - 确保动画元素没有
transform: scale(0.99)类似微调（Safari 把它当复合层，干扰 background 渲染） - 备选方案：用
mask-image配合mask-position动画，iOS 支持更稳，但 IE/Edge 18- 不支持
颜色渐变位移是骨架屏动画最轻量也最可靠的路径，而换色动画本质是“状态提示”，不是“加载指示”。很多人一上来就调色板，结果动效卡、兼容差、语义乱——位置动起来，比颜色变起来重要得多。
